ghettovoice / vuelayers

Web map Vue components with the power of OpenLayers
https://vuelayers.github.io/
MIT License
684 stars 229 forks source link

May I use popup on this map? #9

Closed taroliu closed 7 years ago

taroliu commented 7 years ago

May I use popup as below example http://openlayers.org/en/latest/examples/popup.html

I appreciate if you could provide some sample code!

ghettovoice commented 7 years ago

Overlay component not ready yet. I plan to include it in the next release. Currently you can add an ol.Overlay instance through native OpenLayers API, vl-map component has property map - instance of ol.Map class.

<template>
  <vl-map ref="map">...</vl-map>
</template>
<script>
export default {
  mounted () {
    this.$refs.map.map.addOverlay(new ol.Overlay(...))
  }
}
</script>
ghettovoice commented 7 years ago

As from version 0.7.x there is vl-overlay component was introduced that actually wraps ol.Overlay component under the hood. v0.7 Release notes

flyfishMT commented 6 years ago

How would you suggest hooking into the map from the overlay so that it functioned like a popup? Like in this example: -

 map.on('singleclick', function(evt) {
        var coordinate = evt.coordinate;
        var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
            coordinate, 'EPSG:3857', 'EPSG:4326'));

        content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
            '</code>';
        overlay.setPosition(coordinate);
      });

Would this be a new component?

ghettovoice commented 6 years ago

See this example Currently there is an issue with overlay first render and re-rendering after update, so the special key used. This will be fixed in the next release