User:Kobus/Temp/API JAVASCRIPT MAPAS.doc
API JAVASCRIPT MAPAS (OSM/NOKIA/MAPLINK)
- Google Maps API (V3)
Usando as classes Directions do Gmaps API é possível criar a rota usando o método da classe directionsService.route(request, function(response,status)), o request nada mais é que um array contendo valores como origem, destino, tipo de viagem e etc.
Podendo passar rua/coordenada na origem e destino.
Dentro da função que é passada para o método route, é necessário chamar o método setDirections (directionsDisplay.setDirections(request)) passando o response (resposta do site) que é recebido na função de call-back do método route que vai mostrar as informações no mapa.
Exemplo: [[Image:]]
- Nokia Maps API ( ver. 2.2.3)
Para o calculo de rota no nokia maps foi utilizado o objeto Manager (nokia.maps.routing.Manager), que é o que gerencia a rota.
É possível colocar as configurações de rota como
Tipo : Fastest para as rotas mais rápidas, shortest para as mais curtas,
fastestNow que varia de acordo com o trânsito.
Modo de transporte: carro, pedestre, transporte público e caminhão.
Módo de tráfego : habilitado, desabilitado e default.
Opções : Para filtrar o tipo de rotas como, evitar rodovias, tuneis, estradas de terras e etc.
Criando um array e colocando chave/valor com os elementos acimas.
Para chamar o calculo da rota é criado um objeto da api waypoint (nokia.maps.routing.WaypointParameterList()) e então é adicionado neste objeto duas coordenadas (nokia.maps.map.geo.Coordinate( lat, long)) passando a latitude e a longitude para cada coordenada.
Após isso se pode adicionar uma função call-back para quando a rota for calculada, ele focar onde marcou a rota ou enviar mensagens de erro caso haja uma falha no request.
Então é só chamar o método calculateRoute (nokia.maps.routing.Manager) passando as configurações de rota e o waypoints criado, que ele dispara o request para o site.
Exemplo : [[Image:]]
- MapLink API (API 2)
Para criar a rota necessita um objeto RouteDetails (MRouteDetails()) onde é possível colocar, optimização de rota, se deve descrever a rota, e o tipo de rota (mais rápida, curta, pé, evitando balsas e etc).
Também é necessário criar um objeto Veiculo (MVehicle()), que passa valores como capacidade do tanque, média de consumo, velocidade, preço da gasolina para dados mais específicos.
Após isso necessita de um objeto RouteOptions (MRouteOptions()), que recebe o Veiculo e o RouteDetails criado anteriormente, em suas propriedades.
Então é necessário criar dois RouteStop Partida/Chegada (MRouteStop(latitude, longitude)), então se cria os dois Pontos (MRoutePoint) para Partida/Chegada e cada RoutePoint possui uma propriedade RouteStop que se passa o objeto MRouteStop que segura a latitude e longitude dos pontos.
Após isso é só criar um objeto RouterMannager (MRouteMannager(mapa)) e chamar o método createRoute passando os RoutesPoints e o RouteOptions.
Exemplo: [[Image:]]
Fonte: http://services.maplink.com.br/exemplos-api/exemplosArraste/RotadescricaoIcone.htm
- MapQuest Open API (API V7.0)
Para criar a rota no mapquest você chama a função withModule (MQA.withModule) , passando o argumento directions e uma função de call-back onde passa a coleção de latitudes e longitudes para o método addRoute (map.addRoute(array)) onde a primeira lat/long é a partida e a segunda a chegada, e as que tiverem no meio (se existir) serão os pontos onde ele deve passar.
Exemplo: [[Image:]]
Fonte: http://developer.mapquest.com/web/documentation/open-sdk/javascript/v7.0/routing
- Google Maps API (V3)
Dentro da função de call-back que se usa para calcular a rota (directionService.route), se pegar o parâmetro de resposta do site, é possível pegar o objeto routes dentro dele, e dentro deste objeto route possui a propriedade chamada distance que é possível extrair o texto(string) e o valor(int em metros) da distância.
- Nokia Maps API ( ver. 2.2.3)
Para pegar a distância entre os dois pontos da rota, existe um call-back para a função chamada onRouteCalculated(observedRouter, key, value), e dentro dela é pegado do objeto observedRouter.getRoutes() que retorna uma coleção de rotas, dentro destas rotas é possível pegar uma propriedade TotalLength que é a quilometragem em metros se iterar por todas as pernas da rota é possível pegar a distância final.
Exemplo: [[Image:]]
- MapLink API (API 2)
Para calcular a distância entre dois pontos foi usado um objeto diferente MWsRoute(MWsRoute), só chamar método getRoute dele, passando um Array com dois MRouteStop(MRouteStop(lat,lng)), uma opção de rota (MRouteOptions()) e uma função que recebe um parâmetro (ri) onde deste parâmetro pode ser extraído de uma coleção o objeto segDescription que possui uma propriedade distance que é a representação em quilômetros da distância de cada perna da rota somando tudo se tem o valor final da distância.
Fonte/Exemplo: http://services.maplink.com.br/exemplos-api/exemplos/getRoute.htm
- MapQuest Open API (API V7.0)
Dentro da função withModule que é chamada para calcular a rota na API, no callback que é passado, na chamada do método map.addRoute(array) se você passar uma função displayNarrative consegue extrair dela um objeto que recebe por parâmetro chamado de data, que possui um objeto route e este objeto route possui uma coleção de legs (data.route.legs) cada leg tem uma propriedade chamada maneuver onde esta propriedade possui o tempo e a distância exemplo:
Data.route.legs[0].maneuver.formattedTime -> devolve o time da perna.
Data.route.legs[0].maneuver.distance -> devolve a distância da perna.
Iterando por tudo é possível obter a distância e o tempo total da rota.
Exemplos: [[Image:]]
- Google Maps API (V3)
Similar ao calculo de distância ( ver : Calcular distância entre dois pontos Google maps API v3) , a única diferença é que no objeto route você chama a propriedade duration onde esta possui mais duas propriedades, text (string em minutos) e value (int em segundos).
- Nokia Maps API ( ver. 2.2.3)
Não encontrado
- MapLink API (API 2)
Não encontrado
- MapQuest Open API (API V7.0)
Ver sessão Calcular a rota entre dois pontos.
- Google Maps API (V3)
Usando o objeto Polyline (google.maps.Polyline) é possível desenhar uma linha no gmaps, criando um objeto do tipo Polyline você passa para ele na sua criação uma coleção de valores como, path, coordenadas(google.maps.LatLng) que é os pontos onde deve desenhar, cor da linha, opacidade, largura e etc.
Para desenhar o polígono é similar a criar à linha, a diferença é que se usa o objeto Polygon(google.maps.Polygon) onde você passa o numero de coordenas (google.maps.LatLng) que definirão os pontos do polígono, passando cor, opacidade, largura, cor internar etc.
Exemplo: [[Image:]]
- Nokia Maps API ( ver. 2.2.3)
É possível desenhar linhas/polígonos usando a classe Polygon (nokia.maps.map.Polygon) é possível passar uma coleção de coordenadas (nokia.maps.geo.Coordinate) para ela na sua criação que vão já definir que tipo de ponto/linha/polígono ele desenhara no mapa, é possível após isso colocar configurações, cor, largura, opacidade etc.
Exemplo: [[Image:]]
- MapLink API (API 2)
Para desenhar linhas é possível usar o objeto PolyLine (MPolyLine(pontos, cor, largura, densidade)) passando no pontos uma coleção de points (MPoint), e após isso chamar o método addOverlay da classe (MMap2) que ele adiciona a linha.
Já o polígono pode se usar o objeto polygon (GPolygon(pontos, lineColor, lineWeight, lineOpacity) onde na sua criação é possível passar uma coleção de pontos para cada ponto do polígono, cor da linha, largura, opacidade etc.
Para adicionar o objeto polygon ao mapa só chamar o método map.addOverlay(polygon) .
Fonte/Exemplos:
http://services.maplink.com.br/exemplos-api/exemplosArraste/testepolylinefencecolor.htm
http://services.maplink.com.br/exemplos-api/exemplosArraste/MPolyline.html
- MapQuest Open API (API V7.0)
Para se criar uma linha se faz uma chamada do método withModule (MQA.withModule(‘shapes’, function()), passando o argumento shapes, e uma função de call-back onde você cria uma linha (MQA.LineOverLay()), e chama o método setShapePoints(Array) passando as coordenadas (lat/lng) onde ele deve traçar a linha no mapa, após isso só chamar o método addShape do objeto mapa e passar a linha como argumento.
O polígono é bem similar a linha, a única diferença é que se cria um objeto do tipo polygon(MQA.PolygonOverlay()) ao invés de LineOverlay, passando no método setShapePoints o número de pontos que quiser para ele desenhar o polígono desejado.
Exemplo: [[Image:]] [[Image:]]
- Google Maps API (V3)
Para adicionar um POI (Ponto de interesse), é usado o objeto marker (google.maps.Marker) onde na sua criação pode-se passar uma coleção de valores como posição lat/lng (google.maps.LatLng), titulo, instância do mapa onde quer colocar o marker, e para mudar a imagem dele simplesmente adicionar o atributo icon e apontar o diretório da imagem.
Para remover o POI é só chamar o método setMap(null) do marker que deseja ser removido.
Exemplo: [[Image:]]
- Nokia Maps API ( ver. 2.2.3)
Existem dois POI no nokia maps um é o objeto marker (nokia.maps.map.Marker) e o outro é o StandardMarker (nokia.maps.map.StandardMarker), o standardmarker já vem montado algumas configurações por padrão e é só adicionar ao mapa, da para colocar titulo nele e alterar algumas configurações como arrastar e etc.
O marker normal é customizado, passando como um argumento em sua instância o objeto coordinate(nokia.maps.get.Coordinate) e o outro argumento uma coleção de valores onde é possível definir se pode arrastar, visibilidade, ícone passando o dir da imagem e etc.
Para adicionar o marker no mapa chama o método map.objects.add(marker) ou map.objects.addAll(markers) caso tenha uma coleção, para remover é similar chamando o método map.objects.remove(marker) ou map.objects.removeAll(markers).
Exemplo: [[Image:]]
- MapLink API (API 2)
Para adicionar o marker (POI) no mapa, é só criar um objeto Marker
(MMarker(new MPoint(lat, long), { options : valores}));
E depois adicionar o marker no mapa ( map.addMarker(marker)); ou para remover (map.removeMarker(marker));
Para adicionar o POI no maplink pode se usar o objeto marker (MMarker()) onde se passa para ele o objeto ponto (MPoint) que é o ponto ele vai ser situado. Após isso é só chamar o método do mapa map.addMarker(marker) passando o marker que ele já sera colocar e para remove chamar o método map.removeMarker(marker).
Fonte/exemplo
http://services.maplink.com.br/exemplos-api/exemplosArraste/map.htm
- MapQuest Open API (API V7.0)
Para criar um POI no mapquest se usa o objeto POI (MQA.Poi), logo na sua criação se passa uma coleção com dois inteiros que são coordenadas lat e lng após isso, só chamar o método addShape do mapa passando o marker.
Para criar o POI com imagem customizada é necessário criar um objeto icon (MQA.Icon) passando para ele na criação o diretório completo da imagem, após isso é só chamar o método setIcon do POI (MQA.Poi) e passar o objeto icon para o método.
- Google Maps API (V3)
Para ativar o drag’n drop do marker, só passar na sua criação a propriedade draggable:true que ele já ativa o drag.
Para ativar eventos de clique se adiciona o listener no objeto (google.maps.event.addListener()) passando o objeto a adicionar o listener, o tipo de evento no caso ‘click’ e a função que ele deve executar.
- Nokia Maps API ( ver. 2.2.3)
O draggable é ativado quando se cria o objeto passando a propriedade draggable:true assim ativando o drag’n drop do objeto.
Para adicionar um evento de click se usa algo similar passando na propriedade a chamada $click: ‘codigo js’ passando o fonte na string a ser executado.
Exemplo: [[Image:]]
- MapLink API (API 2)
O draggable e outras configurações podem ser ativados na coleção que é passada para o marker como parâmetro em sua criação como ({Draggable : true}) , para ativar o click do marker é necessário chamar o listener (LBS.Event.addListener(marker, ‘click’, function(evt)) passando o marker que quer ativar o click e passando a função a executar.
Fonte/exemplo:
http://services.maplink.com.br/exemplos-api/exemplosArraste/mapIcon.htm
- MapQuest Open API (API V7.0)
Para tratar drag’n drop, só chamar o método setDeclutterMode (do POI) passando true para ele que permite manusear o POI.
A principio não é possível (Não foi encontrado) manipular o click do POI, pois nativamente ele já configura click com o contentHTML (Infobubble) dele que é uma função do objeto.
Exemplos: [[Image:]]
- Google Maps API (V3)
Para criar uma caixa de texto com html pode se usar o objeto infowindow(google.maps.InfoWindow), e passar na propriedade content o html em string que deseja exibir.
Então para mostrar é só chamar o método infowindo.open() passando coord/markers onde quiser que ele pipoque na tela.
- Nokia Maps API ( ver. 2.2.3)
Para criar a caixa de texto com html no nokia maps, é utilizado o objeto InfoBubble(nokia.maps.map.component.infobubbles()), após isso é necessário adicionar o objeto aos componentes do mapa (map.addComponent(infobubble)) e então para chamar o bubble e colocar no mapa é só executar o método infobubble.addBubble (html, coord) passando o html e a coordenada, podendo usar um listener para chamar o bubble em um mark ou adicionar a caixa onde quiser no mapa.
Exemplo: [[Image:]]
- MapLink API (API 2)
É possível utilizar caixas de texto via markers pelo MapLink API, usando a função openInfoWindow(html) do objeto marker, e passando o html na função.
Exemplo: http://services.maplink.com.br/exemplos-api/exemplosArraste/pin.htm
- MapQuest Open API (API V7.0)
Para criar um infobubble, deve se chamar a propriedade setInfoContentHTML(html) do componente do mapa que deseja receber a caixa de texto e passar o html em string para ele.
Exemplo: [[Image:]]
- Google Maps API (V3)
Calculando a rota com duas coordenadas iguais é possível obter a rua mesmo em um ponto onde não há, o próprio serviço procura a rua mais próxima e traça uma rota, após isso é só pegar o único objeto gerado pela resposta (ver calculo de rota), e pegar a propriedade start_address ou end_address do objeto response.routes[0].legs[0].start_address/end_address.
Exemplo: [[Image:]]
- Nokia Maps API ( ver. 2.2.3)
Não conseguido!
Exemplo : [[Image:]]
- MapLink API (API 2)
Usando o objeto AddressFinder (MWsAdressFinder()) é possível buscar informações de um determinado ponto do mapa usando a função getAdress(point, function(addrloc)) onde se passa o ponto (MPoint()) desejado e manipula a informação na função que é passada onde há um parâmetro que pode ser extraído informações como, numero de casa (addrloc.address.houseNumber), nome da rua (addrLoc.address.houseNumber) e etc.
Exemplo : http://services.maplink.com.br/exemplos-api/exemplosArraste/revGeoPin.htm
- MapQuest Open API (API V7.0)
Sem resultado!
- Google Maps API (V3)
Para controlar o zoom pode ser chamado o método setZoom do objeto mapa, colocando um valor inteiro para o nível de zoom desejado.
Para o controle de pan, chama-se o método panTo do objeto mapa, passando um objeto LatLng( google.maps.LatLng(lat,lng)) para ele ir para o pan desejado.
Fonte: http://www.polaticus.com.br/2010/09/14/exemplo-simples-da-api-do-google-maps-v3/
- Nokia Maps API ( ver. 2.2.3)
Para controlar o zoom do mapa é possível chamar o método zoomTo do objeto map (nokia.maps.map.Display) passando três argumento, um objeto do tipo BoundingBox (nokia.maps.map.geo.boundingBox) que é um objeto que representa uma área retangular no sistema de coordenadas do mapa, um valor booleano se o mapa após o zoom deve focar o centro do mapa, e a animação que o mapa usara para fazer o zoom.
Exemplo: map.zoomTo(mapRoute.getBoundingBox(), false, "default");
No caso ele pega o box de uma rota calculada.
O controle sobre o pan pode ser feito mudado usando o método:
map.pan(map_start_x, map_start_y, map_end_x, map_end_y);
Onde é possível colocar o x inicial, y inicial, x final e y final, depois disso é só ir controlando as variáveis para ir movimentando o mapa.
Exemplos: [[Image:]][[Image:]]
- MapLink API (API 2)
Para controlar o nível do zoom é só chamar o método map.setZoom(number), passando o nível de zoom que se deseja ter no mapa.
Para controlar o pan do mapa pode-se utilizar o método map.pan(x,y) onde x/y são o número de pixels que ele vai movimentar no mapa, é possível também usar o método map.panTo(MPoint()) que usa um objeto lat/lng(MPoint).
Fonte: http://services.maplink.com.br/exemplos-api/exemplosArraste/testeZoomPoints.htm
- MapQuest Open API (API V7.0)
Para controlar o zoom é possível usar o método setZoomLevel do objeto map, passando um inteiro que é o nível do zoom que será focado.
Já sobre o pan, é possível utilizar ‘empurrões’ para qualquer direção usando os métodos panNorth, panSouth, panWest e etc, do objeto map.
Fonte: http://developer.mapquest.com/web/documentation/sdk/javascript/v7.0/panning
- Google Maps API (V3)
Como o ClusterMarker (Agrupamento dos POIS) funciona no cliente side e há bem mais de uma solução para isso, foi utilizado um exemplo da google que usa o fonte markerclusterer.js e mais alguns arquivos para geração do cluster (veja o exemplo para mais informações).
Para criar o cluster é só criar uma coleção de todos os markers que existir no mapa, criar um objeto MarkerClusterer (MarkerClusterer(mapa, markers, options[])) passando o mapa, a coleção de markers e as opções do cluster como, nível de zoom que ele deve agrupar, tamanho de quantos markers deve possuir, podendo até passar estilos para como quer que o cluster apareça (balão, esfera, numero e etc).
Informações adicionais: https://developers.google.com/maps/articles/toomanymarkers?hl=pt-br
- Nokia Maps API ( ver. 2.2.3)
É possível agrupar os pontos de interesse usando a api nativa da nokia, ou usando uma library da google.
Usando a api nativa da nokia é possível usar o objeto ClusterProvider (nokia.maps.clustering.ClusterProvider) , onde você passa dois argumentos, o display que é a instância do mapa, e as opções do cluster, como
eps: o valor desta propriedade indicara a que determinada quantidade de pixel ele deve começar agrupar os markers.
Theme: você pode criar temas para os cluster como é mostrado no exemplo abaixo usando SVG.
Min/max: propriedades para configurar o nível de zoom que ele deve agrupar os markers.
Depois é só ir adicionando os markers no cluster chamando o método add ou addAll caso tenha uma coleção de markers.
Fonte: http://www.developer.nokia.com/Community/Wiki/Nokia_Maps_API_-_How_to_cluster_map_markers
Exemplo: [[Image:]][[Image:]]
Usando a api da google o processo é semelhante mas é necessário um arquivo javascript extra que se chama markerclusterer.js
Para fazer o cluster tem que criar um objeto MarkerClusterer e ir adicionando os markers no objeto MarkerClusterer usando o método:
MarkerClusterer.objects.add(marker) ou
MarkerClusterer.objects.addAll(markers)
Após isso é so adicionar o componente no objeto do mapa: map.addComponent(MarkerClusterer)
Exemplo: [[Image:]][[Image:]]
- MapLink API (API 2)
Não encontrado.
- MapQuest Open API (API V7.0)
Não encontrado.
- Google Maps API (V3)
Na criação do marker ou depois é possível colocar uma valor na propriedade ‘title’ que irá segurar o titulo do marker
Exemplo : marker.title = ‘valor do titulo’
Mais informações ver a sessão como adicionar/remover ponto de interesse.
- Nokia Maps API ( ver. 2.2.3)
Mesmo esquema do Gmaps api, no objeto marker existe uma propriedade chamada title que quando recebe o valor pipoca o valor do titulo no marker.
Marker.title = ‘valor’
Mais informações ver a sessão como adicionar/remover ponto de interesse.
- MapLink API (API 2)
Usando o método setTitle(value) do objeto MMarker do maplink api é possível colocar o titulo do marker.
- MapQuest Open API (API V7.0)
O map quest usa o mesmo procedimento do MapLink para conseguir title nos POI’s, tem que criar um objeto Icon (MQA.Icon(dir, x,y)) já com a imagem com title e adicionar no POI chamando o método setIcon().
- Google Maps API (V3)
O marker no gmaps possui um método chamado setVisible(boolean) passando um valor verdadeiro ele aparece, passando um falso ele esconde.
Fonte: https://developers.google.com/maps/documentation/javascript/reference?hl=pt-br#Marker
- Nokia Maps API ( ver. 2.2.3)
O objeto marker (nokia.maps.map.Marker ou nokia.maps.map.StandardMarker) possui uma propriedade chamada visibility, passando true ele ira aparecer no mapa (valor default dele) e passando false ele ira esconder no mapa.
Fonte: http://api.maps.nokia.com/2.1.1/apireference/symbols/nokia.maps.map.StandardMarker.Properties.html
http://api.maps.nokia.com/2.1.1/apireference/symbols/nokia.maps.map.Marker.html
- MapLink API (API 2)
Usando o método hide() do objeto MMarker é possível esconder o marcador estiver visível e chamando o método show() ele mostra o marcador se estiver escondido.
- MapQuest Open API (API V7.0)
Não há métodos hide/show na api native, as alternativas é retirar o controle do mapa e depois adicionando usar os método removeControl/addControl, ou colocar uma imagem 100% transparente usando o método setIcon.
Fonte: http://developer.mapquest.com/web/documentation/open-sdk/javascript/v7.0/api/MQA.Poi.html
- Google Maps API (V3)
Quando é criado o mapa é possível passar a propriedade center um objeto LatLng (google.maps.LatLng(lat,lng)) onde ele recebe a latitude e a longitude do centro do mapa.
Mais informações ver os exemplos anteriores na criação do mapa.
- Nokia Maps API ( ver. 2.2.3)
Parecido com o da google, na criação do mapa onde se passa os componentes, uma propriedade chamada center recebe um array com dois inteiros onde o primeiro é a latitude e o segundo a longitude.
Exemplo:
var display = new nokia.maps.map.Display(document.getElementById("map"),
{ "components": [ "center" : [29.762778, -95.383056] });
Fonte: http://api.maps.nokia.com/en/apireference/2.2.3/symbols/nokia.maps.map.Display.Properties.html
- MapLink API (API 2)
Para configurar o centro do mapa é só chamar o método map.setCenter(lat,long) passando a latitude e a longitude nos parâmetros correspondente.
Fonte: http://dev.maplink.com.br/2012/08/09/mmap2-mapa/
- MapQuest Open API (API V7.0)
Quando se cria o mapa, na função de call-back que é passada onde pode se coloca a propriedade options uma delas é a propriedade latLng onde se passa a latitude e a longitude do centro do mapa Exemplo:
var options={
latLng:{lat:40.735383, lng:-73.984655}
};
Mais informações ver os exemplos anteriores na criação do mapa.
- Google Maps API (V3)
Proposta HBSIS: [[Image:]]
- Nokia Maps API ( ver. 2.2.3)
[[Image:]]
[[Image:]]
- MapLink API (API 2)
Segue o pdf com as expliações:
[[Image:]]
- MapQuest Open API (API V7.0)
O MapQuest possui duas modalidades uma grátis (Open Data API) e uma paga (Licensed Data API)
A pesquisa e os exemplos foram utilizados a versão grátis a principio a diferença mais significativa é sobre o trânsito em tempo real, o resto foi tudo possível concluir com a API grátis.
Existem três tipos de licença para se utilizar:
-
- Licença de empresa
Versão paga inicial no valor anual de $ 2.500,00.
Direito a suporte e todos os recursos do MapQuest (API).
Serviço priorizado (você tem mais preferencia do que os que não pagam).
- Licença Comunidade
Uma versão com limitações por dia de pesquisa, rotas e etc., porém com serviço priorizado.
Não foi encontrado preços.
- Licença Comunidade Aberta
A versão que foi testada há principio não havia limite, porém se o serviço estiver congestionado outros request (Pagos) terão mais prioridade que o seu.
Esta licença é grátis.
Mais informações sobre a diferença da versão paga e grátis:
http://developer.mapquest.com/web/tools/getting-started/platform/licensed-vs-open
Termos de licença e uso:
http://developer.mapquest.com/web/tools/getting-started/terms-overview
