Leaflet GeoJSON – Loading External GeoJSON File into Leaflet Map

geojsonjavascriptleaflet

Have studied How to load external GeoJSON file into Leaflet map but not getting desired result.

My index.html looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>GeoJSON data</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link rel='stylesheet' href='http://cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css' />
    <link rel='stylesheet' href='index.css'>
    <script src='http://cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js'></script>
    <script src='http://cdn.jsdelivr.net/leaflet.esri/latest/esri-leaflet.js'></script>
    <script src='https://raw.github.com/calvinmetcalf/leaflet-ajax/master/dist/leaflet.ajax.min.js'></script>
    </head>
  <body>
    <div id='map'></div>
    <script src='index.js'></script>
  </body>
</html>

My index.js looks like this:

var map = L.map('map').setView([32.71, -85.59], 10);
var layer = L.esri.basemapLayer('Topographic').addTo(map);
var geojsonLayer = new L.GeoJSON.AJAX('counties.geojson', {onEachFeature:popUp}, {style:geojson});
var myStyle = {"color": "#ff7800", "weight": 4, "opacity": 0.65};
geojsonLayer.addTo(map);

function popUp(feature, layer) {
    layer.bindPopup(feature.properties.name);
}

my index.css looks like this:

html, body, #map { margin: 0; padding: 0; width: 100%; height: 100%; }

A sample of the counties.geojson file can be seen on geojson.io here

How to update the files to add the counties.geojson data to the ESRI basemap?

After that works, would like to popUp the counties.geojson properties, such as the "NAME": "Cleburne".

With the update to index.css this combo now works.

Will need to narrow the borders on counties and change blue to an ear color, but it works. @toms refocused my attention on index.css.

Best Answer

geojson styles need to be defined in javascript, not css.

Here's a sample style:

var countyStyle = {
    "color": "#cec4bc", // medium? brown  
    "weight": 1,  // stroke weight in pixels
    "opacity": 0.65
};

You can look up path style options here in Leaflet documentation.

There are many sites to look up hex or rgb color codes and help choose colors, e.g. http://www.color-hex.com/color/ff7800

Related Question