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.

Improve this question
4
  • 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 7, 2015 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 7, 2015 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 7, 2015 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 7, 2015 at 17:09

1 Answer 1

Reset to default
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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.