Does not work with any of the map APIs (re-rendering incompatibility)

Expected behavior

With the library like leafletjs or google maps API, choo should render a geo map and then update (re-render) it without any problem.

Actual behavior

Upon emitting render with updated coordinates (latitude and longitude), every map implementation dies and then displays blank container or , alternatively, empty, grey map. Tested with:

1. Leaflet
2. Google Maps
3. Mapbox GL

It results in the same outcome.

Steps to reproduce behavior

Example code (map component):

import html from 'choo/html';

export default ({latitude = 51.505, longitude = -0.09, zoom = 18, markers = []},
    emit) => {
    const geoMap = html`<div id="map" style="height: 380px"></div>`;
    if (typeof L !== 'undefined') {
            const map = L.map(geoMap).setView([latitude, longitude], zoom);
            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
                maxZoom: zoom,
                id: 'mapbox.streets',
                accessToken: 'apiTokenHere'
            }).addTo(map);    
    }
    return geoMap;
};

[yoshuawuyts]

Check out the example in https://github.com/yoshuawuyts/nanocomponent, you need to make sure that the DOM element is not recreated on each render, nanocomponent (and https://github.com/yoshuawuyts/microcomponent) help with this (:

On Wed, May 31, 2017 at 8:21 PM Maciej Sitko [e-mail] wrote:

Yup, the rerender of anything apparently kills all maps.

There has to be a way not to do this as this makes geocoding impossible.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/yoshuawuyts/choo/issues/507#issuecomment-305273961, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWlej4RbDafrKCvQOPP3fCwb23FiU9Rks5r_a-xgaJpZM4Nr5sx .

[graforlock]

You are right, its even on the forefront of github 😃 My bad