I'm currently working on a Leaflet website that will be able to display GPS-Tracks with different projections. Now I'm trying to implement a dropdown menu based on Bootstrap, where I can set different coordinate reference systems (CRS), see code below:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projections<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li class="dropdown-header">Switzerland</li>
                <li><a href="#">LV95</a></li>
                <li><a href="#">RT90</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Sweden</li>
                <li><a href="#">SWEREF99TM</a></li>
                <li><a href="#">SWEREF99</a></li>
                <li><a href="#">ST74</a></li>

For example, I have the Swiss LV95 CRS, among others, in a separate .js file from which I would like to call it. This is an example of how to call a proj4leaflet CRS when instantiating a new map:

var map = new L.Map('map', {
crs: LV95

L.tileLayer('http://api.geosition.com/tile/osm-bright-3006/{z}/{x}/{y}.png', {
  maxZoom: crs.options.resolutions.length,
  minZoom: 0,
  continuousWorld: true,
  attribution: 'Map data © <a      href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>, Imagery © 2013 <a href="http://www.kartena.se/">Kartena</a>'

So when I click on the "LV95" Dropdown element, it instantiates a new map with the respective CRS overwriting the old var map = L.map.

Are there any efficient implementation ideas or critique for my approach?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.