Adicione o ScribbleMaps ao seu aplicativo
Nota:Use o ScribbleMaps Connect Picker quando quiser que os usuários façam login no Scribble Maps, naveguem pelos mapas disponíveis e retornem os dados do mapa diretamente para o seu aplicativo web.O seletor abre em um pop-up e lida com o processo de login do usuário lá, para que seu aplicativo não precise coletar credenciais do Scribble Maps diretamente.
Conteúdo
Obtenha seu Client ID
Adicione o SDK à sua página
Abra o Connect Picker
Trate os dados do mapa selecionado
Configuração opcional
Formatos suportados e campos retornados
Como o Connect Picker funciona
O ScribbleMaps Connect Picker permite que seus usuários naveguem, pesquisem e selecionem mapas do Scribble Maps, e então retornem esses dados de mapa diretamente para o seu aplicativo no formato que você escolher.
Isso é útil quando você deseja que os usuários criem ou gerenciem geodados no Scribble Maps e depois carreguem esses dados em seu próprio aplicativo sem precisar criar seu próprio navegador de mapas ou fluxo de login.
Caso de Uso / Exemplo:
Esta integração é útil para painéis, ferramentas imobiliárias, aplicativos de dados de campo e outros aplicativos web que precisam que os usuários selecionem e carreguem dados mapeados do Scribble Maps.
Obtenha seu Client ID
-
Abra o site de desenvolvedores do Scribble Maps:
https://developers.scribblemaps.com -
Registre um projeto gratuito.
-
Copie seu Client ID.
Você usará este valor ao chamar o Connect Picker.
Adicione o SDK à sua página
-
Na sua página web, adicione o SDK do Connect Picker:
<script src="https://api.scribblemaps.com/connect/picker.js"></script>
-
Salve as alterações da sua página.
O Scribble Maps Connect Picker agora está disponível para o seu aplicativo.
Abra o Connect Picker
-
Chame ScribbleMapsConnect.pick() a partir da sua página.
-
Passe seu clientId, o format de exportação desejado e um callback onSelect.
-
Use um código semelhante ao seguinte exemplo:
ScribbleMapsConnect.pick({ clientId: 'YOUR_CLIENT_ID', format: 'geojson', onSelect: function (result) { // result.data contains your GeoJSON // result.title, result.mapCode, result.thumbUrl also available loadIntoMyApp(result.data); } });Quando o seletor abrir, o usuário poderá se autenticar, navegar pelos mapas disponíveis e selecionar um.
Trate os dados do mapa selecionado
-
No callback onSelect, acesse result.data.
Isso contém os dados do mapa no formato solicitado. -
(Opcional) Use os campos adicionais retornados:
- result.title — o título do mapa
- result.mapCode — o código do mapa do Scribble Maps
- result.thumbUrl — uma URL de miniatura para o mapa
-
Passe os dados para a lógica do seu aplicativo.
Por exemplo, carregue o GeoJSON retornado em seu próprio visualizador de mapas ou fluxo de trabalho de dados.
Configuração opcional
Você pode configurar o seletor para se adequar melhor ao fluxo de trabalho do seu aplicativo.
-
Selecione o formato de exportação alterando o valor de format.
Por exemplo: geojson, kml, csv, gpx, dxf, shapefile ou smjson. -
Escolha quais fontes de mapa os usuários podem navegar com a opção tabs.
Os usuários podem navegar por mapas de sua biblioteca pessoal, mapas compartilhados com a equipe ou da coleção da comunidade. - (Opcional) Use os estilos de botão incluídos para combinar com uma interface clara ou escura.
Formatos suportados e campos retornados
Formatos de exportação suportados:
- GeoJSON
- KML
- CSV
- GPX
- DXF
- Shapefile
- SMJSON
Campos de resultado retornados:
- data
- title
- mapCode
- thumbUrl
Depois de configurado, o Connect Picker oferece aos seus usuários acesso aos dados do Scribble Maps diretamente de dentro do seu aplicativo por meio de um único ponto de integração.
Relacionado
Última atualização