0

In order to do several Thematic Analysis to my GeoJSON Polygon file, I have to load each time the duplicate version of it, in order to have that color thematic of the specified attribute (This is not good idea). I want to use only one GeoJSON file & do several thematics.

var mymap = L.map('mapid').setView([35.402484, 8.125763], 13);          
var OpenStreetMap_Mapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);

//Color class for Population
var populationtClass = [
[0, 'rgb(249, 253, 255)'],
[500, 'rgb(195, 225, 243)'],
[1000, 'rgb(180, 219, 243)'],
[2000, 'rgb(124, 188, 227)'],
[5000, 'rgb(89, 160, 203)'],
[9000, 'rgb(30, 123, 180)'],
[19800, 'rgb(8,  86, 133)']
 ];
 //Color Class for Job
 var JobClass = [
[0, 'rgb(255, 255, 255)'],
[20, 'rgb(243, 250, 213)'],
[300, 'rgb(241, 252, 197)'],
[800, 'rgb(234, 252, 164)'],
[1000, 'rgb(224, 247, 132)'],
[2000, 'rgb(214, 250, 68)'],
[3000, 'rgb(180,222,15)']
 ];

 //function Returning the Color
 var coloring = function (thresholds, value) {
                for (var i = 0; i < thresholds.length - 1; i++) {
                    if (value < thresholds[i + 1][0])
                        return thresholds[i][1];
                }
                return thresholds[thresholds.length - 1][1];
};


//Loading Geojson of Zone1 and color it by population value
var Zone1=new L.geoJson(Zone1,{
      style: function (feature) {
              var population = feature.properties.Pop_2015;
                                return {
                 fillColor: coloring(populationtClass, population),
                        fillOpacity: 0.75,
                        weight: 1,
                        color: 'black'
                    };
                },
onEachFeature: function (feature, layer) {
        layer.on({
                        'mousemove': function (e) {
                            e.target.setStyle({
                                weight: 7,
                                color: 'red'

                            });

                          },
                        'mouseout': function (e) {
                            Zone1.resetStyle(e.target);


                        },
                        'click': function (e) {
                            mymap.fitBounds(e.target.getBounds());

                        }});}});

//Loading Geojson of Zone2 and color it by Jobs value                       
var Zone2=new L.geoJson(Zone2,{
      style: function (feature) {
              var JOBS = feature.properties.Job_2015;
                                return {
                 fillColor: coloring(JobClass, JOBS),
                        fillOpacity: 0.75,
                        weight: 1,
                        color: 'black'
                    };
                },
onEachFeature: function (feature, layer) {
        layer.on({
                        'mousemove': function (e) {
                            e.target.setStyle({
                                weight: 7,
                                color: 'red'

                            });

                          },
                        'mouseout': function (e) {
                            Zone2.resetStyle(e.target);


                        },
                        'click': function (e) {
                            mymap.fitBounds(e.target.getBounds());

                        }});}});                        

//I dont want to load twice my Geojson files in order to get different thematic 
//I want to use Only one Geojson file & do two thematics once for poupulation & other for Job

L.control.layers({
'BaseMap' :OpenStreetMap_Mapnik
    },{
'Population':Zone1,
'Jobs':Zone2
}).addTo(mymap);

Here is my example running

  • Since Zone1 and Zone2 are equal, why are you reading it twice? You can use the same GeoJSON for creation of both layers, which you cannot avoid if you want to have separate layers for different properties. – TomazicM Nov 25 at 17:34
  • Please go ahead do the changes in my planker example.That is what I wanted using and loading one geojson but doing several thematics. – Rabie Ben Nov 25 at 20:20
  • It looks like there might be some misunderstanding. Just subtitute Zone2 GeoJSON in your second L.geoJson call with Zone1 GeoJSON. You don't need Zone2 GeoJSON at all. – TomazicM Nov 25 at 20:26
  • I dont know how to do new coloring of already charged Geojson unless I reload it again and do new coloring.How I could do new coloring without reloading this Geojson – Rabie Ben Nov 26 at 7:28
  • What do you mean by "reloading"? If you have two separate layers you have to go through all GeoJSON features twice to construct those two layers. – TomazicM Nov 26 at 8:49

Your Answer

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

Browse other questions tagged or ask your own question.