Adjust example

Dominique92 · Dec 16, 2016 · e787c9d · e787c9d
1 parent 456164e
commit e787c9d
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 80 deletions.
diff --git a/examples/control-nominatim.css b/examples/control-nominatim.css
@@ -4,7 +4,7 @@ html, body, #map{
   overflow:hidden;
 }
 body {
-  font: 1em/1.5 'Open Sans', sans-serif;
+  font: 1em/1.5 'Roboto', sans-serif;
   color: #222;
   font-weight: 400;
 }
@@ -14,52 +14,9 @@ body {
   z-index:1;
   top:0; bottom:0;
 }
-.ol-control button{ 
+.ol-control button{
   background-color: rgba(40, 40, 40, 0.8) !important;
 }
-.ol-control button:hover{ 
+.ol-control button:hover{
   background-color: rgba(40, 40, 40, 1) !important;
-}
-
-.ol-popup {
-  position: absolute;
-  min-width: 180px;
-  background-color: white;
-  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
-  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
-  padding: 15px;
-  border-radius: 10px;
-  border: 1px solid #ccc;
-  bottom: 12px;
-  left: -50px;
-}
-.ol-popup:after, .ol-popup:before {
-  top: 100%;
-  border: solid transparent;
-  content: " ";
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-.ol-popup:after {
-  border-top-color: white;
-  border-width: 10px;
-  left: 48px;
-  margin-left: -10px;
-}
-.ol-popup:before {
-  border-top-color: #cccccc;
-  border-width: 11px;
-  left: 48px;
-  margin-left: -11px;
-}
-.ol-popup-closer {
-  text-decoration: none;
-  position: absolute;
-  top: 2px;
-  right: 8px;
-}
-.ol-popup-closer:after {
-  content: "✖";
 }
diff --git a/examples/control-nominatim.html b/examples/control-nominatim.html
@@ -3,20 +3,17 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.11.1/ol.min.css">
-    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans">
-    <link rel="stylesheet" href="./../build/ol3-geocoder.css">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.20.0/ol.css">
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/openlayers.popup/1.0.1/ol3-popup.css">
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto">
+    <link rel="stylesheet" href="../build/ol3-geocoder.css">
     <link rel="stylesheet" href="control-nominatim.css">
   </head>
   <body>
     <div id="map" tabindex="0"></div>
-    <div id="popup" class="ol-popup">
-      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
-      <div id="popup-content"></div>
-    </div>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.11.1/ol.min.js"></script>
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
-    <script src="./../build/ol3-geocoder.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.20.0/ol.js"></script>
+    <script src="//cdn.jsdelivr.net/openlayers.popup/1.0.1/ol3-popup.js"></script>
+    <script src="../build/ol3-geocoder-debug.js"></script>
     <script src="control-nominatim.js"></script>
   </body>
 </html>
diff --git a/examples/control-nominatim.js b/examples/control-nominatim.js
@@ -4,17 +4,6 @@
 (function (win, doc) {
   'use strict';
 
-  /**
-  * Popup
-  **/
-  var container = doc.getElementById('popup'),
-      content = doc.getElementById('popup-content'),
-      closer = doc.getElementById('popup-closer'),
-      overlay = new ol.Overlay({
-        element: container,
-        offset: [0, -40]
-      });
-
   var olview = new ol.View({
         center: [0, 0],
         zoom: 3,
@@ -27,32 +16,29 @@
       map = new ol.Map({
         target: doc.getElementById('map'),
         view: olview,
-        loadTilesWhileAnimating: true,
-        loadTilesWhileInteracting: true,
         layers: [baseLayer]
       });
 
+  var popup = new ol.Overlay.Popup({
+    panMapIfOutOfView: false
+  });
+  map.addOverlay(popup);
+
   //Instantiate with some options and add the Control
   var geocoder = new Geocoder('nominatim', {
     provider: 'photon',
+    targetType: 'text-input',
     lang: 'en',
     placeholder: 'Search for ...',
     limit: 5,
-    keepOpen: true
+    keepOpen: false
   });
   map.addControl(geocoder);
 
   //Listen when an address is chosen
   geocoder.on('addresschosen', function (evt) {
-    var coord = evt.coordinate;
-    content.innerHTML = '<p>' + evt.address.formatted + '</p>';
-    overlay.setPosition(coord);
+    window.setTimeout(function () {
+      popup.show(evt.coordinate, evt.address.formatted);
+    }, 1000);
   });
-
-  closer.onclick = function () {
-    overlay.setPosition(undefined);
-    closer.blur();
-    return false;
-  };
-  map.addOverlay(overlay);
 })(window, document);