website/js/nominatim-ui.js

   1 var map;
   2 var last_click_latlng;
   3
   4 jQuery(document).on('ready', function(){
   5         $('#q').focus();
   6
   7         map = new L.map('map', {
   8                                 center: [nominatim_map_init.lat, nominatim_map_init.lon],
   9                                 zoom:   nominatim_map_init.zoom,
  10                                 attributionControl: false,
  11                                 scrollWheelZoom:    false,
  12                                 touchZoom:          false,
  13                         });
  14
  15         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  16 //              attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  17         }).addTo(map);
  18
  19
  20
  21         function display_map_position(mouse_lat_lng){
  22
  23                 html_mouse = "mouse position " + (mouse_lat_lng ? [mouse_lat_lng.lat.toFixed(5), mouse_lat_lng.lng.toFixed(5)].join(',') : '-');
  24                 html_click = "last click: " + (last_click_latlng ? [last_click_latlng.lat.toFixed(5),last_click_latlng.lng.toFixed(5)].join(',') : '-');
  25
  26                 html_center =
  27                         "map center: " +
  28                         map.getCenter().lat.toFixed(5) + ',' + map.getCenter().lng.toFixed(5) +
  29                         " <a target='_blank' href='" + map_link_to_osm() + "'>view on osm.org</a>";
  30
  31                 html_viewbox = "viewbox: " + map_viewbox_as_string();
  32
  33                 $('#map-position').html([html_center,html_viewbox,html_click,html_mouse].join('<br/>'));
  34                 $('input#use_viewbox').trigger('change');
  35         }
  36
  37         map.on('move', function(e) {
  38                 display_map_position();
  39         });
  40
  41         map.on('mousemove', function(e) {
  42                 display_map_position(e.latlng);
  43         });
  44
  45         map.on('click', function(e) {
  46                 last_click_latlng = e.latlng;
  47                 display_map_position();
  48         });
  49
  50         map.on('load', function(e){
  51                 display_map_position();
  52         });
  53
  54
  55         $('input#use_viewbox').on('change', function(){
  56                 $('input[name=viewbox]').val( $(this).prop('checked') ? map_viewbox_as_string() : '');
  57         });
  58
  59
  60
  61         function map_viewbox_as_string() {
  62                 // since .toBBoxString() doesn't round numbers
  63                 return [
  64                         map.getBounds().getSouthWest().lat.toFixed(5),
  65                         map.getBounds().getSouthWest().lng.toFixed(5),
  66                         map.getBounds().getNorthEast().lat.toFixed(5),
  67                         map.getBounds().getNorthEast().lng.toFixed(5) ].join(',');
  68         }
  69         function map_link_to_osm(){
  70                 return "http://openstreetmap.org/#map=" + map.getZoom() + "/" + map.getCenter().lat + "/" + map.getCenter().lng;
  71         }
  72
  73         function get_result_element(position){
  74                 return $('.result').eq(position);
  75         }
  76         function marker_for_result(result){
  77                 return L.marker([result.lat,result.lon], {riseOnHover:true,title:result.name });
  78         }
  79         function circle_for_result(result){
  80                 return L.circleMarker([result.lat,result.lon], { radius: 50, weight: 1, fillColor: '#F0F7FF', color: 'red', opacity: 0.75});
  81         }
  82
  83         var layerGroup = new L.layerGroup().addTo(map);
  84         function highlight_result(position, bool_focus){
  85                 var result = nominatim_results[position];
  86                 if (!result){ return }
  87                 var result_el = get_result_element(position);
  88
  89                 $('.result').removeClass('highlight');
  90                 result_el.addClass('highlight');
  91
  92                 layerGroup.clearLayers();
  93
  94                 if (result.aBoundingBox){
  95
  96                         console.log('bounding box, maybe polygon', result);
  97                         var bounds = [[result.aBoundingBox[0]*1,result.aBoundingBox[2]*1], [result.aBoundingBox[1]*1,result.aBoundingBox[3]*1]];
  98                         map.fitBounds(bounds);
  99                         if (result.astext && result.astext.match(/POLY/) ){
 100                                 var layer = omnivore.wkt.parse(result.astext);
 101                                 layerGroup.addLayer(layer);
 102                                 // layer.addTo(map);
 103                                 // addedLayers.push(layer);
 104                         }
 105                         else {
 106                                 var layer = L.rectangle(bounds, {color: "#ff7800", weight: 1} );
 107                                 layerGroup.addLayer(layer);
 108                         }
 109                 }
 110                 else {
 111                         // console.log('lat,lon,zoom');
 112                         map.panTo([result.lat,result.lon], result.zoom || nominatim_map_init.zoom);
 113                         var circle = circle_for_result(result);
 114                         circle.on('click', function(){
 115                                 highlight_result(i);
 116                         });
 117                         layerGroup.addLayer(layer);
 118
 119                         // circle.addTo(map);
 120                 }
 121
 122                 var crosshairIcon = L.icon({
 123                         iconUrl:     'images/crosshair.png',
 124                         iconSize:    [12, 12],
 125                         iconAnchor:  [6, 6],
 126                 });
 127                 var crossMarker = new L.Marker([result.lat,result.lon], { icon: crosshairIcon, clickable: false});
 128                 layerGroup.addLayer(crossMarker);
 129
 130                 // crossMarker.addTo(map);
 131                 // addedLayers.push(crossMarker);
 132
 133
 134                 if (bool_focus){
 135                         $('#map').focus();
 136                 }
 137         }
 138
 139         $.each(nominatim_results, function(i, result){
 140
 141         });
 142
 143
 144         $('.result').on('click', function(e){
 145                 highlight_result($(this).data('position'), true);
 146         });
 147
 148         highlight_result(0, false);
 149
 150
 151 });