Apache Flex/ Flex/ Sem categoria

Mapas para o Apache Flex

flex-maps

Se você tentou utilizar o Google Maps para a plataforma Flash nos últimos meses, você deve estar em um mar de apuros, o suporte a chave de requisição acabou e o projeto foi descontinuado e o Google Maps for Flash vai funcionar só até Setembro de 2014. Até o Yahoo Maps para Flash foi cancelado. E agora o que você pode fazer?

Pois é, muita gente ficou orfão de mapas em solução Flex, existe o MapQuest, só que não é tão bom no Brasil quanto nos EUA.

Se você já tem uma solução em Flex e que utilize o Google Maps, Yahoo, continue com ela, agora se você está pensando em colocar mapas em sua App Flex, o mais fácil será utilizar o Google Maps for Javascript e se comunicar com ele. Porém fica uma solução híbrida e pode afetar em alguma parte o workflow que você teria se tivesse dentro da própria aplicação.

Apresento a vocês uma solução Open-source que pode salvar muito desenvolvedor Flex que ficou abandonado.

Flex-Map

é uma solução Open-source que vai te ajudar a criar mapas para suas Apps Flex sem se preocupar mais com os distribuidores de mapas.

O grande problema com mapas hoje do Flex é que existem 1 alternativa para 1 distribuidor, como Google, Nokia, Microsoft, Openstreet. E se você for utilizar algum deles você acaba criando várias bibliotecas para administrar. Então é ai onde o Flex-Maps entra, com 1 só biblioteca você pode escolher qual distribuidor de mapas você quer para sua App.

Atualmente eu deixei suportando apenas os seguintes distribuidores:

  • Open Street
  • Nokia Here
  • Yahoo Maps
  • Microsoft Bing
  • Nasa Blue Marble

Construindo sua App com Mapas

É bem fácil implementar essa solução de mapas em suas App Flex, basta fazer o seguinte.

Ir ao repositório do Github. Baixar o projeto e criar um novo projeto no Flash Builder, adicionar o SWC disponível no Github e adicionar o seguinte código em sua App.
flex-maps

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:flex="org.apache.flex.maps.flex.*">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>	 
 
		<fx:Script>
			<![CDATA[
				import spark.events.IndexChangeEvent;
 
				protected function onProviderChanged(event:IndexChangeEvent):void
				{
					myMap.provider = provider.selectedItem.value;
				}
 
			]]>
		</fx:Script>
		<s:HGroup>
			<s:Button width="82" height="22" label="Zoom In" click="myMap.map.zoomIn(event)"/>
			<s:Button label="Zoom Out" click="myMap.map.zoomOut(event)"/>
				<s:ComboBox id="provider" change="onProviderChanged(event)">
						<s:dataProvider>
							<s:ArrayList>
								<fx:Object label="NASA BLUE MARBLE" value="BLUE_MARBLE"/>
								<fx:Object label="Open Street Map" value="OPEN_STREET_MAP"/>
								<fx:Object label="Nokia HERE Normal" value="HERE_MAP_NORMAL"/>
								<fx:Object label="Nokia HERE Hybrid" value="HERE_MAP_HYBRID"/>
								<fx:Object label="Yahoo Aerial" value="YAHOO_AERIAL"/>
								<fx:Object label="Yahoo Hybrid" value="YAHOO_HYBRID"/>
								<fx:Object label="Yahoo Road" value="YAHOO_ROAD"/>								
								<fx:Object label="Nokia HERE TERRAIN" value="HERE_MAP_TERRAIN"/>
								<fx:Object label="Microsoft Hybrid" value="MICROSOFT_HYBRID"/>
								<fx:Object label="Microsoft Hybrid" value="MICROSOFT_HYBRID"/>
								<fx:Object label="Microsoft Aerial" value="MICROSOFT_AERIAL"/>
								<fx:Object label="Microsoft ROAD" value="MICROSOFT_ROAD"/>
							</s:ArrayList>
						</s:dataProvider>
				</s:ComboBox>
		</s:HGroup>
 
 
				<flex:FlexMap showControls="true" id="myMap"
									 width="100%" extent="-9.4384955,-40.3835929,12,0,0" height="100%" 
									 draggable="true" provider="HERE_MAP_HYBRID" 
									 zoom="12" center="-9.4384955,-40.3835929,12,0,0"
									 doubleClick="myMap.map.onDoubleClick(event)" />
</s:Application>

Viu que é fácil?

O código fonte está disponível no Github, dê um fork. O mapa para o Google ainda está em desenvolvimento.

9 thoughts on “Mapas para o Apache Flex”

  3. Magnífico!

    Aqui na empresa onde trabalho tínhamos várias soluções com o GMaps/flash. Tivemos que criar um projeto separado em jsf para manter os produtos afetados pela descontinuação da api.

    O chefe não discute a possibilidade de utilizar outra solução que não seja o Google Maps, portanto, assim que o mapa do Google estiver disponível nesta solução, farei a migração o quanto antes :)

    Muito obrigado pela iniciativa, excelente trabalho!!!!!

    Responder

  4. Igor Parabéns pela iniciativa, também cheguei a desenvolver algo parecido, mas o seu esta muito bom mesmo.

    Amigo, é possível passar lat, long e retornar de alguma forma o endereço ?

    Estou precisando muito mesmo. Obrigado.

    Responder

  5. Eu também fiquei a ver navios, guando precisei criar uma app flex com o googlemaps,
    tive que aprender javascript para criar minha app, por um lado foi bom , pois acabei aprendendo javascript
    mas agora vou tentar fazer um exemplo em flex

    valeu Igor

    Responder

  7. Fantástico! Parabéns pela iniciativa do projeto, esta sendo e será um salvação para os usuários de Flex com Google Maps. Eu e minha equipe aguardamos ansiosos pela versão com suporte ao GMaps.

    Parabéns Igor!

    Responder

  8. Como anda este projeto, Igor?
    Baixei os arquivos no git mas não encontrei o swc que você fala no post.

    Abraços

    Responder

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *