map-2

by Vladimir Vershinin

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/style.css">
<script src="https://unpkg.com/[email protected]/lodash.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.css">
<script src="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/olcesium.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/olcesium.js"></script>
<script src="https://unpkg.com/[email protected]/dist/olms.js"></script>
<link rel="stylesheet" href="https://unpkg.com/ol-contextmenu/dist/ol-contextmenu.min.css">
<script src="https://unpkg.com/ol-contextmenu"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
<div id="app">
  <vl-map ref="map" data-projection="EPSG:4326">
    <vl-view ref="view" :zoom.sync="zoom" :center.sync="center"></vl-view>

    <vl-layer-tile>
      <vl-source-osm></vl-source-osm>
    </vl-layer-tile>
    
    <vl-overlay id="my_overlay" :position="coords" positioning='center-center' :stop-event="false">
     <div id="my-svg"
          class="my-class"
          style="width: 100px; height: 100px; background-color='transparent'">
     </div>        
    </vl-overlay>
  </vl-map>
</div>

CSS

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  flex-direction: column;
}

.vl-map {
  overflow: hidden;
}

.my-class {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;  /* has no effect */
}

Vue

new Vue({
  el: '#app',
  data() {
    return {
      zoom: 4,
      center: [-79.4, 36.0],
      coords: [-79.4, 36.0],
    }
  },
   mounted() {
    d3.select("#my-svg").selectAll("svg").remove();

    let svg_div = d3.select("#my-svg")
      .append("svg")
        .attr("width", 100)
        .attr("height",100)
      .append("g")

    svg_div.append('circle')
      .attr('cx', 50)
      .attr('cy', 50)
      .attr('r', 10)
      .style('stroke', 'black')
      .style('fill', 'green')
    },
})