https://github.com/kshitijrajsharma/plgsp_webmap
Training for IT Officers of Gandaki Province , Organized by Gandaki Academy in support of (Provincial and Local Governance Support Program(PLGSP). Technical Support Provided by I.T. Maps and Consultant Pvt. Ltd.
https://github.com/kshitijrajsharma/plgsp_webmap
geojson jquery leafletjs line point polygon
Last synced: about 2 months ago
JSON representation
Training for IT Officers of Gandaki Province , Organized by Gandaki Academy in support of (Provincial and Local Governance Support Program(PLGSP). Technical Support Provided by I.T. Maps and Consultant Pvt. Ltd.
- Host: GitHub
- URL: https://github.com/kshitijrajsharma/plgsp_webmap
- Owner: kshitijrajsharma
- Created: 2021-09-30T17:17:20.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-09-30T19:19:54.000Z (over 3 years ago)
- Last Synced: 2025-01-22T12:22:00.425Z (3 months ago)
- Topics: geojson, jquery, leafletjs, line, point, polygon
- Language: JavaScript
- Homepage: https://itskshitiz321.github.io/plgsp_webmap/
- Size: 2.61 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Map
This is Training of Gandaki Academy , Provincial and Local Governance Support Program , Gandaki Province Nepal
## Installation
We will use [leaflet](https://leafletjs.com/examples/quick-start/) for map rendering.
```bash
```
Let's include leaflet script file in our html
```bash
```
## Setup Map Division
```bash
```
## Setup Jquery and bootstrap
```
```
Put this inside head section of your page
```
```
Please make sure to update tests as appropriate.
## Jquery Document ready function
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).on( "load", function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.
```
$( document ).ready(function() {
console.log( "ready!" );
});
```
# Setup Map with map variable
```
var mymap = L.map("mapid").setView([28.2096, 83.9856], 12);
```
Setup Google Satellite Layer for leaflet
```
var googleSat = L.tileLayer(
"http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
{
maxZoom: 20,
subdomains: ["mt0", "mt1", "mt2", "mt3"],
}
);
```
Setup Openstreetmap Layer for leaflet
```
var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'© OpenStreetMap contributors',
});
```
Setup Google Map Layer for leaflet
```
googleStreets = L.tileLayer(
"http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
{
maxZoom: 20,
subdomains: ["mt0", "mt1", "mt2", "mt3"],
}
).addTo(mymap);
```
We need to create list of basemap to add it on leaflet control
```
var baseMaps = {
"Google Map": googleStreets,
"Open Street Map": osm,
"Satellite": googleSat,
};
```
# Leaflet Control
Leaflet has a nice little control that allows your users to control which layers they see on your map. We will assign it in variable called layerswitcher so that we could add inside it later.
Note : {collapsed:false } will set leaflet layer control open
```
layerswitcher = L.control
.layers(baseMaps, {}, { collapsed: false })
.addTo(mymap);
```
What if we want to add northarrow ? Not only northarrow we can add other pictures over leafletmap using this methodology
```
var northarrow = L.control({ position: "topright" });
```
You can add image inside control, This function will run after northarrow will be added to map . .onAdd() function will run after layer is added.
```
northarrow.onAdd = function () {
var img = L.DomUtil.create("img");
img.src = "img/northarrow.png";
img.style.width = "100px";
img.style.height = "100px";
return img;
};
// now add northarrow to map
northarrow.addTo(mymap);
```
# Leaflet custom Marker Setup
```
var myIcon = L.icon({
iconUrl: '***marker directory *****' ,
iconSize: [20, 20]
});
```
You can add marker with custom marker with this leaflet code
```
L.marker(latlng, {icon: myIcon});
```
# jQuery getJSON() Method
The getJSON() method is used to get JSON data using an AJAX HTTP GET request.
```
$.getJSON("geojson/roadmodi.geojson", function (data) {
console.log(data);
});
```
# L.geoJson
It Represents a GeoJSON object or an array of GeoJSON objects. Allows you to parse GeoJSON data and display it on the map. Extends FeatureGroup.
```
L.geoJson(data, {
style: function (feature) {
return {color: feature.properties.color};
},
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.description);
}
}).addTo(map);
```
## Options
### pointToLayer( featureData, latlng )
Function that will be used for creating layers for GeoJSON points (if not specified, simple markers will be created).
### style( featureData )
Function that will be used to get style options for vector layers created for GeoJSON features.
### onEachFeature( featureData, layer )
Function that will be called on each created feature layer. Useful for attaching events and popups to features.
#### For Loop inside on EachFeature for finding attributes Key and value from geojson
Here table is class of [bootstrap](https://getbootstrap.com/docs/4.0/content/tables/)
```
var popupContent = '';
for (var p in feature.properties) {
popupContent +=
"" +
p +
":" +
"" +
feature.properties[p] +
"";
}
popupContent += "";
```
feature.properties contains all attribute information information hence p represents key of json and feature.properties[p] represents value of that key
#### Binding Popup to layer
```
layer.bindPopup(popupContent, {
maxHeight: 225,
width: 200,
closeButton: false,
});
```
## Mouse Events
```
layer.on("mouseover", function () {
layer.openPopup();
});
layer.on("mouseout", function () {
layer.closePopup();
});
```
## Mouse Event Lat Long Finder
```
mymap.addEventListener('mousemove', function(ev) {
lat = ev.latlng.lat;
lng = ev.latlng.lng;
console.log(lat,lng);
});
```
## Happy Learning ! <3