Drawing Geojson features(Points) on Leaflet maps

This post will demonstrate how to draw geojson point features into a Leaflet powered web map;

First we create our simple leaflet map on a web page. The basic web page comprises of html, leaflet CSS and JS sheets and HTML div map container. In the script section, a map variable object is created and tile layers from Openstreetmap.org are loaded into the variable map object.


doctype html-001


Below is a screenshot displaying the simple leaflet map in our web page.

Capture-13_thumb3

 


We define the geojson point feature and load it as variable object.


// Create a variable object and load the geojson point feature to the script section
var Feature = {
“type”: “Feature”,
“properties”: {
“name”: “Nigeria”,
“amenity”: “Offshore Site”,
“popupContent”: “Point”
},
“geometry”: {

“type”: “Point”,
“coordinates”: [7.80, 3.92]
}
};
// add the feature to the base map using L.geoJson
L.geoJson(Feature).addTo(map);

Capture-15

We can now add a pop-up display by inserting (text in red color) in the javascript section. The onEachFeature function should be placed above the variable object defining the geojson features.



// this will determine if the feature in the layer has a property known as ‘name’
function onEachFeature(feature, layer) {
// bind the popup from the property- name
if (feature.properties && feature.properties.name) {
        layer.bindPopup(feature.properties.name);
    }
}

var Feature = {
"type": "Feature",
"properties": {
"name”: “Point",
"amenity": "Offshore Site"
    },
"geometry": {
    
"type": "Point",
"coordinates": [7.80, 3.92]
	}
};
// add feature and the value defined to feature on the map 
L.geoJson(Feature, {
    onEachFeature: onEachFeature
}).addTo(map);

  
   

 

Capture-16

Next, we want to replace the default blue markers with circular symbols. 
The highlighted sections create a variable that will use CSS to style the markers 
while option- return L.circleMarker(latlng, style); changes the 
default marker to a circular symbol.

var Feature = {
"type": "Feature",
"properties": {
"name": "Point",
"amenity": "Offshore Site" },
"geometry": {
    
"type": "Point",
"coordinates": [7.80, 3.92]
    }
};
// set a style for the feature

var style = {
radius: 8,
fillColor: “#813”,
color: “#f45”,
weight: 1,
opacity: 1,
fillOpacity: 0.8
};

// convert from a default L.marker to a L.circleMarker, add the style layer and draw as layer on the map
L.geoJson(Feature, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, style);
}
}).addTo(map);

 


 On the screenshot the default blue marker is now replaced 
by a circular symbol.
Capture-4

 See live map at 
http://htmlpreview.github.io/?https://github.com/mayotunde/geojsonpoints/blob/gh-pages/point.html
See Source code of our example below:

doctype html-001

Thank you for following the demonstration. We hope you enjoyed it.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s