7

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

Improve this question
1
  • Can you explain what you mean by format? How do you want to show the data from the file?
    – Devdatta Tengshe
    Commented Aug 5, 2014 at 7:25

1 Answer 1

Reset to default
7

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

Improve this answer
1
  • How would your answer change for points?
    – Theo F
    Commented Jul 23, 2023 at 19:51

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