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>

Improve this question

1 Answer 1

Reset to default
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);
Improve this answer
1
  • Yes! very sorry as new to stackexchange - would upvote too but don't have necessary reputation yet. Thanks again!
    – Jamie
    Commented Dec 5, 2015 at 16:41

Your Answer

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

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