How to build a sidebar to toggle markers and popups?

[alani]

Hi everybody!
I would like to toggle some markers with popups by clicking links in a sidebar. (open the popup and zoom to the location). Isn't there any simple solution for that? Just some onclick-function? I guess I need to assign individual IDs to every marker. But I'm lost. I don't know much about js (shame on me) and I searched the whole internet for easy to understand examples. It would also be ok to display the standard layer controls (baseLayers + overlays) in a sidebar.

I appreciate any advice, link, idea, help or comments. Thanks!
Alani

[Bryan McBride]

Have a look at this demo I put together showing how to build a sidebar and search functionality using Leaflet with GeoJSON: http://projects.bryanmcbride.com/leaflet/geojson_hacks.html

BRYAN

[soum]

this is terrific !

On Tue, Nov 27, 2012 at 10:34 PM, Bryan McBride <mcbrid...@gmail.com> wrote:

Have a look at this demo I put together showing how to build a sidebar and search functionality using Leaflet with GeoJSON: http://projects.bryanmcbride.com/leaflet/geojson_hacks.html

BRYAN

--

--
soum

[alani]

Thank you guys, I already knew this demo, it is great but it links the sidebar to polygons , not to markers and I'm just not clever enough to adapt this technique for markers.

[Michael Savarese]

Very nice Brian, just what I'm looking for. I had some luck with jqGrid but found it hard to configure. If I had the skills I'd like to create a plugin like this GeoEXT example. I have no idea where to start, but I know it would be useful.

[Kyle Pennell]

Brian, This example is what I needed. I might still have problems but it gave it a hint in the right direction.  

Maybe you could post it again or do a bootleaf example with it?  I think a lot of people would like to have a sidebar list that points to the points.

[Arnie Shore]

Bryan, yes, please. Yr
http://projects.bryanmcbride.com/leaflet/geojson_hacks.html# flames
out, and from yr other contributions, this is one I really wd love to
see.

AS

[Bryan McBride]

Hey guys,

I've been changing my website around and ended up breaking a few links- sorry! Anyway, here's the new link to that demo: http://bryanmcbride.com/project-work/leaflet/geojson_hacks.html. I will work on adding markers to the new sidebar in BootLeaf so that functionality is available there as well.

FYI- if you want to zoom to points rather than polygons, replace map.fitBounds() for map.setView().

BRYAN

[Kyle Pennell]

Thanks, Bryan.

--
 
---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/4cRQTLPjqvo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Kyle Pennell]

Hey Bryan,

I'm quite stuck on this.  I'm trying to append to the sidebar using your example. 

Here's the JS:

console.log(hikes);
var features = [];
hikes.eachLayer(function (layer) {
   var id = layer._leaflet_id;
var date = layer.feature.properties.Date;
var coords = layer.feature.geometry.coordinates;


// Populate features array and build autocomplete
features.push({id: id, label: date, value: date, lat: lat, lng: lng});
console.log(features);
// Populate sidebar table with clickable feature links
$(".list-group ul").append('<li><a href="#" onclick="map._layers['+id+'].openPopup(); return false;">'+date+'</a></li>');
// Add features to zoom dropdown
});

Here's the HTML

<div class="list-group" id="listings">
            <ul><li>ha2</li></ul>
            <div id="list-group-container">
            
            
    
                
                <button class="list-group-item">title
                    <p class="address">address</p>
                    <li>test</li>
                </button>

Here's a bit of the Geojson:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": "01",
      "properties": {
        "Date": "Nov 1",
        "Location": "Oaxaca Panteon",
        "Terrain": "City",
        "Difficulty": "Easy"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -96.7587967,
          17.1174164
        ]
      }
    },
    {
      "type": "Feature",
      "id": "02",
      "properties": {
        "Date": "3/4/2014",
        "Location": "Apoala",
        "Terrain": "Countryside",
        "Difficulty": "Difficult"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -97.1377792,
          17.6514606
        ]
      }
    },

I can't figure out why this won't append to the sidebar.  I can't get it to do even the most basic things.  I've tinkered with your example in different ways and get what's happening. But I'm missing something with treating my own geojson data.

Any tips would be so appreciated.

thanks. 

[Bryan McBride]

Hey Kyle,

Could you post or attach some actual code? It's tough trying to debug without running it.

BRYAN

[Kyle Pennell]

Thanks so much, Bryan.  I'll try to not waste your time.  

https://github.com/kpennell/oaxacahikingmap/blob/master/js/map.js#L112

With some helpful console logs, I've figured out that my geojson isn't in the right kind of object.  When I console logged the geojson from your geo_hacks example, it showed up as a proper object.

 When I try to run lines 114-130, it doesn't append anything. 

Do you see where my Geojson might be coming in wrong?  Does it have to do with that var hikes = L.geoJson(null

[Bryan McBride]

You shouldn't even need that features array. That was used for the autocomplete functionality in the geojson_hacks example. So you can remove lines 114, 122, 126, 132.

I think the problem is on line 128 where you are trying to reference the (undefined) variable 'date' for the anchor. Try replacing +date+ with +name+.

Best regards!

BRYAN

--
 
---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/4cRQTLPjqvo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
Bryan R. McBride, GISP
bryanmcbride.com

[Kyle Pennell]

Ok, I'll try some of those.

I guess I was using date instead of name because my geojson doesn't have a name field.

[Bryan McBride]

See line 117: var name = layer.feature.properties.Date;

[Kyle Pennell]

Ok, thank you.  I'll see if I can figure it out now.

[Kyle Pennell]

Still no dice.  Thanks though.

[Bryan McBride]

Remove hikes.eachLayer() (line 119) and put everything inside that function into the hikes onEachFeature function.

BRYAN

On Tuesday, February 18, 2014 3:49:22 PM UTC-5, Kyle Pennell wrote:

Still no dice.  Thanks though.

[Kyle Pennell]

That's what I needed.  Thanks so much.  That should give me plenty.

--

[Casper Väresmaa]

Hey could you post new link for your website. I would appreciate it.