1

Assigning a style to a geojson layer but it is visualising with the aforementioned style as well as the default blue style assigned to geojsons. Can't work out what is causing

enter image description here

<!DOCTYPE html>
<html>  
<head>
<title>Global Terrorism Attacks </title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/own_style.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script type="text/javascript" src="geojsonLayer.js"> </script>
</head>
<body>
<div id ="container">
    <div id="header">
    <br><b>Global Terrorism Attacks</b><br><br>
    </div>
</div>
<div id="map">
<script>
    var map = L.map('map').setView([41,-1],2);
    var CartoDB_All = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
        subdomains: 'abcd',
        maxZoom: 19
    });
    CartoDB_All.addTo(map); 

    var layerOrder=new Array();
    function popupcall (feature, layer) {
        layer.bindPopup("<h1 class='header'></h1>" + feature.properties.admin);

    };

    function doStylegtd(feature) {
    if (feature.properties.armassault >= 0.0 &&
            feature.properties.armassault <= 500.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#2b83ba',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.armassault >= 500.0 &&
            feature.properties.armassault <= 1000.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#80bfab',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.armassault >= 1000.0 &&
            feature.properties.armassault <= 1500.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#c7e8ad',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.armassault >= 1500.0 &&
            feature.properties.armassault <= 2000.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#ffffbf',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.armassault >= 2000.0 &&
            feature.properties.armassault <= 2500.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#fdc980',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.armassault >= 2500.0 &&
            feature.properties.armassault <= 3000.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#f07c4a',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    if (feature.properties.armassault >= 3000.0 &&
            feature.properties.armassault <= 3017.0) {

        return {
            color: '#000000',
            weight: '1.04',
            dashArray: '',
            fillColor: '#d7191c',
            opacity: '0.6',
            fillOpacity: '0.6',
        }
    }
    }
    L.geoJson(geojsonLayer, {
        style: doStylegtd
        }).addTo(map);
    L.geoJson(geojsonLayer,{
        onEachFeature: popupcall
    }).addTo(map);  

    //jamie.setStyle(function(feature) { return secondStyle; });
    //L.Util.setOptions(jamie,{style:secondStyle})
</script>
</div>

1

You are adding the same geojson layer to the map twice:

L.geoJson(geojsonLayer, {
    style: doStylegtd
    }).addTo(map);
L.geoJson(geojsonLayer,{
    onEachFeature: popupcall
}).addTo(map);  

The second one of these is giving you the default blue outlines.

Try:

L.geoJson(geojsonLayer, {
    style: doStylegtd,
    onEachFeature: popupcall
}).addTo(map);
  • Yes! very sorry as new to stackexchange - would upvote too but don't have necessary reputation yet. Thanks again! – Jamie2483 Dec 5 '15 at 16:41

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.