Displays Open Street Map with Riot.js

I wrote a custom tag to display open street map for riot.js with leaflet.

JavaScript:

<map></map>

<script>
riot.mount( 'map', {
  lat: '34.567',
  lng: '123.45'
} )
</script>

map.tag:

<map class="map">
  <div class="back" onclick="{ click }"><i class="glyphicon glyphicon-remove"></i></div>
  <script type="es6">
    const div = document.createElement( 'div' )
    this.root.appendChild( div )
    div.style.width = '100%'
    document.querySelector( '#panel' ).style.height = '100%'
    document.body.classList.add( 'fixed' )
    const map = L.map( div )

    const show_map = function() {
      const h = document.body.clientHeight - document.querySelector( '.fixed-header' ).clientHeight
      div.style.height = h + 'px'

      const lat = opts.lat
      const lng = opts.lng

      map.setView( new L.LatLng( lat, lng ), 14 )

      L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      } ).addTo( map )

      L.marker( [ lat, lng ] ).addTo( map )
    }

    this.click = function() {
      window.history.back()
    }.bind( this )

    window.addEventListener( 'resize', function() {
      if ( global.resizeTimer !== false ) {
        clearTimeout( global.resizeTimer )
      }
      global.resizeTimer = setTimeout( function() {
        show_map()
      }, Math.floor( 1000 / 60 * 10 ) )
    } )

    show_map()
  </script>
</map>

https://github.com/wakayama-hacker/wmap/blob/master/tags/map.tag


Leave a Reply

Your email address will not be published. Required fields are marked *