getBounds - Kody, triki, sztuczki

13 sty 2020

Alternatywa dla google maps - Open Street Map oraz Leaflet

alternatywa dla google maps

Inspirację do napisania tego wpisu było zebranie całej wiedzy w jednym miejscu. Nigdzie nie spotkałem się z całościowym artykułem, wszystko jest porozrzucane po internecie i trzeba nieźle się naszukać.

Wszystkie przykłady będą opierały się o OSM - Open Street Map jest darmowa i dostępna dla wszystkich. Oczywiście jeżeli chcesz ją wykorzystać w większym zakresie to lepiej samemu postawić serwer, który będzie serwować mapy do tego również warto dodać serwer z routingiem bo OSM ich nie posiadają.

Aby mapa w ogóle miała sens należy użyć jakieś biblioteki do obsługi tejże mapy. W naszym przypadku użyjemy Leaflet.

Do każdego punktu postaram się dodać przykłady zrobione w https://codepen.io, najlepiej kliknąć w Edit on codepen aby zobaczyć wynik bo nie zawsze poprawnie na tej stronie się wyświetlają przykłady.

Niestety jedną wielką bolączką OSM jest to, że nie ma w nich zaszytego routingu tak jak w google maps. W związku z tym nie jesteśmy w stanie wyznaczyć trasy a punktu A do punktu B. Jest oczywiście inny serwis który to wspiera i można to z powodzeniem połączyć z OSM.
Więcej informacji za i przeciw mapom OSM w podsumowaniu.

Czytaj dalej

2 mar 2009

Obrysowanie granic Polygonu

polygon = new GPolygon(points, "#00A000", 1, 1, "#00ff00", 0.1, {clickable: true});

var bounds = polygon.getBounds()
//for(var i=0;i&lt;points.length;i++){bounds.extend(points[i])}

var pSW = bounds.getSouthWest();
var pNE = bounds.getNorthEast();

var pNW = new GLatLng(pSW.lat(), pNE.lng());
var pSE = new GLatLng(pNE.lat(), pSW.lng());

var points2 = [];
points2.push(pSW);
points2.push(pNW);
points2.push(pNE);
points2.push(pSE);
points2.push(pSW);
polygon2 = new GPolygon(points2, "#00A000", 1, 1, "#00ff00", 0.1, {clickable: true});

2 mar 2009

Dodawnie Markera w oparciu w współrzędne pikselowe

Utworzenie ikony:

var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(6, 20);

Dodanie markera w lewym dolnym rogu mapy:

map.addOverlay(
  new GMarker(map.getBounds().getSouthWest(), 
  {
    icon: icon, draggable: true
  }
));

Dodanie markera w lewym dolnym rogu mapy + (10,10) pikseli:

var point1 = map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom())

map.addOverlay(
 new GMarker(map.getCurrentMapType().getProjection().fromPixelToLatLng(new GPoint(point1.x+10, point1.y-10), map.getZoom()), {icon: icon, draggable: true})
);