Mapbox: Marker Nav links outside of map

176 views Asked by At

I have been trying to use the example on Mapbox.com for link navigation. marker nav

I want to be able to change the js innerHTML to different properties in my own geojson i.e. change title to "editorname". I can get the nav links to reflect the correct properties, but it disables the popup. I am really new at this sorry if I am not making my problem succinct. The following is what I am working with.

My geoJSON:

    myLayer.setGeoJSON([{
    "type":"Feature","geometry":{"type":"Point","coordinates":[-87.453325,38.006909]},"properties":{"objectid_1":2,"objectid":50,"title":"CENTERRA RIDGE SEC 3","editorname":"Ryan Key","lastupdate":"2014-02-03T00:00:00.000Z","description":"T-112","weburl":"http://maps.evansvillegis.com/Apps/Subdivisions/Scans/T/T-112.pdf","created_us":null,"created_da":null,"last_edite":null,"last_edi_1":null,"shape_leng":2407.666236,"orig_fid":49,"point_x":2846145.10825,"point_y":1005002.97882,"cartodb_id":2,"created_at":"2015-05-31T23:02:35Z","updated_at":"2015-05-31T23:18:17Z","price_upper":"false","price_mid":"false","price_lower":"true"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-87.474933,38.000353]},"properties":{"objectid_1":4,"objectid":81,"title":"CWKS UNITED","editorname":"Ryan Key","lastupdate":"2014-01-22T00:00:00.000Z","description":"T-104","weburl":"http://maps.evansvillegis.com/Apps/Subdivisions/Scans/T/T-104.pdf","created_us":null,"created_da":null,"last_edite":null,"last_edi_1":null,"shape_leng":1800.536856,"orig_fid":80,"point_x":2839909.17485,"point_y":1002641.02521,"cartodb_id":4,"created_at":"2015-05-31T23:02:35Z","updated_at":"2015-05-31T23:19:22Z","price_upper":"false","price_mid":"false","price_lower":"true"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-87.634783,38.071915]},"properties":{"objectid_1":5,"objectid":123,"title":"GILMORE HUSSMANN","editorname":"Ryan Key","lastupdate":"2014-04-02T00:00:00.000Z","description":"T-120","weburl":"http://maps.evansvillegis.com/Apps/Subdivisions/Scans/T/T-120.pdf","created_us":null,"created_da":null,"last_edite":null,"last_edi_1":null,"shape_leng":2057.178751,"orig_fid":122,"point_x":2794002.17808,"point_y":1028934.09894,"cartodb_id":5,"created_at":"2015-05-31T23:02:35Z","updated_at":"2015-05-31T23:19:26Z","price_upper":"false","price_mid":"false","price_lower":"true"
    }
}
]);
1

There are 1 answers

1
Jonatas Walker On BEST ANSWER

Here it is. All you have to do is something like:

var content = '<h2>New Content!<\/h2>' +
'<p>' + marker.feature.properties.title + '<br \/>' +
'link: ' + marker.feature.properties.weburl + '<\/p>';

marker.bindPopup(content);