Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Something along these lines</p> <p>First, turn your layer into a variable</p> <pre><code>var mylayer = L.geoJson(statesData, {style: style}); map.addLayer(mylayer); </code></pre> <p>Create a new function for getting the new style based on your buttons id</p> <pre><code>function newStyle(id) { return { fillColor: getColor(id), weight: 2, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.7 }; } </code></pre> <p>Then listen for the click and get the btn id and set the new style</p> <pre><code>$('body').on('click', 'btn', function (btn) { var id = $(btn).attr('id'); var new_style = newStyle(id); mylayer.setStyle(new_style); }); </code></pre> <p>UPDATE:</p> <p>Updated the getcolor to only be getColor(id). You should make your buttons correspond to the colors in the getColor function on the example. So id="11" will return #FED976 from the example, id="21" will return #FEB24C and so on. </p> <p>Alternatively you could just set your button ids to the color (id="#FED976") and then change the fillColor: getColor(id) to fillColor: id</p> <p>UPDATE2:</p> <pre><code>function style1(feature) { return { fillColor: getColor(feature.properties.btn1) }; } function style2(feature) { return { fillColor: getColor(feature.properties.btn2) }; } var mylayer = L.geoJson(statesData, {style: style}); map.addLayer(mylayer); $('body').on('click', 'btn', function (btn) { var id = $(btn).attr('id'); switch (id) { case "btn1": map.removeLayer(mylayer); mylayer = L.geoJson(statesData, {style: style1}); map.addLayer(mylayer); break; case "btn2": map.removeLayer(mylayer); mylayer = L.geoJson(statesData, {style: style2}); map.addLayer(mylayer); break; } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POHow to change geojson style by clicking a button
      singulars
      1. PTQuestion
    1. PTAnswer
    1. US7wonders
    1. US7wonders
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to change geojson style by clicking a button
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks for your quick response. I did all that you've written but I ama facing the following error Uncaught ReferenceError: feature is not defined
      singulars
      1. PO
      1. USgeoSAM
    2. COSee updated version. I recommend the alternative for simplicity. Then you can just set up each button to be whatever color you want.
      singulars
      1. PO
      1. US7wonders
    3. COThe thing is I need fillColor:getColor(feature.properties.btn1) because I want the onclick event not to change the color of the layer but to change the attribute from where it gets the values to be passed to getcolor function function getColor(d) { return d > 1000 ? '#800026' : d > 500 ? '#BD0026' : d > 200 ? '#E31A1C' : d > 100 ? '#FC4E2A' : d > 50 ? '#FD8D3C' : d > 20 ? '#FEB24C' : d > 10 ? '#FED976' : '#FFEDA0'; }
      singulars
      1. PO
      1. USgeoSAM
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload