5

First of all I apologize for my basic english. I have to say, too, that I'm really a newby in coding. I'm trying to create an interactive map using Leaflet (you can see it here). I was able to show my geojson file using Ajax-plugin. Now I want to change the style of my GeoJSON file, but I really don't know how I can do that. Can someone explain me?

This is my code:

<!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' />
            <style>
                    html { height: 100% }
                    body { height: 100%; margin: 0; padding: 0 }
                    #map { 
                            width: 100%;
                            height: 480px; 
                    }
            </style>
            <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
            <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
            <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/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>
var map = L.map('map').setView([42.00, 12.00], 4);
var layer = L.esri.basemapLayer('ShadedRelief').addTo(map);
var geojsonLayer = new L.GeoJSON.AJAX("etatsroutesdelasoie.geojson");       geojsonLayer.addTo(map);
</script>
</body>
</html>

Thanks

  • Can you explain what you mean by format? How do you want to show the data from the file? – Devdatta Tengshe Aug 5 '14 at 7:25
4

You need to use the style properties of the L.GeoJSON object. The ajax plugin is extending this object and thus, the properties valid with the L.GeoJSON object are also valid with the plugin object.

<< I assume your geometries are polygons/lines and not points >>

// Define a style
var myStyle = {
        "color": "#ff7800",
        "weight": 5,
        "opacity": 0.65
    };

// Add the style to your layer    
var geojson = new L.GeoJSON.AJAX("etatsroutesdelasoie.geojson",{
         style:myStyle});

See the reference on the leaflet documentation: http://leafletjs.com/reference.html#geojson-style

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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