2

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.

PolyGeo
  • 65,136
  • 29
  • 109
  • 338
Jay Gray
  • 123
  • 1
  • 5
  • 1
    Specifically, what is not working? style:geojson needs to be defined in javascript, not css. e.g. var myStyle = {"color": "#ff7800", "weight": 5, "opacity": 0.65}; – toms May 07 '15 at 16:25
  • Here is the page. I made your change; moved style from .css to .js. I run firebug but do not see any reported errors. – Jay Gray May 07 '15 at 16:34
  • Doink. I forgot to add #map to index.css. It's not pretty (yet) but it's a starting point. – Jay Gray May 07 '15 at 16:52
  • @toms can you tell me how to reduce the stroke on the county outlines and change the stroke color to a medium brown color (slightly darker than the ESRI map)? If you put that in an answer I'll accept it. – Jay Gray May 07 '15 at 17:09

1 Answers1

4

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

toms
  • 6,978
  • 1
  • 25
  • 30