Cross platform mapping with Universal Windows Apps
2. Cross platform mapping
met Universal Windows
Apps
Ofwel: bouw 1100+ apps met open data
Joost van Schaik
Windows Phone Development MVP
3. Hello
•Joost van Schaik aka LocalJoost
•[insert fancy title of the day] @ Vicrea Solutions
• Geo-ict
•Windows Phone Development MVP
•Nokia Developer Champion
•4 open sources libraries, 1 nog actief
7. Agenda
• What’s new
• Convergence: gebruik maken van Universal Windows Apps
• Basis kaart manipulatie
• Tekenen op de kaart
• Geocoding
• Routing
• Geofencing
• Tracking
• Gebruik van 1100+ NL open geo data sets
9. What’s new
• Nieuwe nieuwe map control: Windows.UI.Xaml.Maps.MapControl
• Vrijwel gehele API rondom mapping
• Geofencing
• Eenvoudiger / consistenter geometrie
• MapIcon
• MapControl.Children -> XAML objects
• Sterk verbeterde tile sets*
• Geopoint
* = niet in dit verhaal
10. Mapping convergence
Korte verhaal: we zijn er nog niet
• Bing Maps vs Here Maps control
• Location vs Geopoint
• Geoposition (voor location)
• Events op map (phone) vs events op shapes (Win8)
• Grote verschillen in advanced mogelijkheden en
simulatie
11. Is er eigenlijk mapping convergence?
•Geolocation 100%
•Geofencing 100%
•Geopoint
•Processing geodata in shared part of PCL
12. Eerst en vooral
•Map key
•Capabilities: internet client &
location
•Bing Maps: x64
13. Demo 1 – de basis
•Basis kaart manipulatie
•Tekenen kaart shapes
•Data opvragen
• ADP to the rescue
•Gedeelde code in universele app en PCL
14. Lessons learned – demo 1
•Basis kaart manipulatie
•Twee coördinaattypes en conversie
•MapIcon (niet in Windows 8)
• Smart display
• Labeling
•ADP koppeling geometrie -> object
•Shared code -> Frame rate counter in één klap
uit
30. Samenvatting
•Nieuwe map control voor Windows Phone
•Gebruik universal project
• Shared code, partial classes, PCL
•Overeenkomsten
• Tracking, Geofencing, Map Manipulation
•Verschilllen
• Tekenen van shapes, Geocoding, Routing
• Point types
•Ongetwijfeld meer, maar niet in dit verhaal.
32. Mocht je nog steeds niet genoeg van me hebben
http://dotnetbyexample.blogspot.com
@localjoost
joostvanschaik@outlook.com
localjoostnl
33. Laat ons weten wat u vindt van deze sessie! Vul de evaluatie
in via www.techdaysapp.nl en maak kans op een van de 20
prijzen*. Prijswinnaars worden bekend gemaakt via Twitter
(#TechDaysNL). Gebruik hiervoor de code op uw badge.
Let us know how you feel about this session! Give your
feedback via www.techdaysapp.nl and possibly win one of
the 20 prices*. Winners will be announced via Twitter
(#TechDaysNL). Use your personal code on your badge.
* Over de uitslag kan niet worden gecorrespondeerd, prijzen zijn voorbeelden – All results are final, prices are
examples
34. Related sessions 16-4
Slot Title Speaker
17:45 App Analytics voor Windows Phone en
Windows Store
Mark Monster
17:45 Je hebt een app. Nu alleen nog verkopen! Dennis
Vroegop
35. Related sessions 17-4 (1)
Slot Title Speaker
09:1
5
Diagnosing performance issues in Xaml based
Windows Phone and Windows Store Apps with
Visual Studio 2013
Harikrishna
Ajithkumar
Menon
09:1
5
Designing XAML Apps using blend for Visual
Studio 2013
Fons
Sonnemans
09:1
5
Building Windows Store apps for Windows
Phone 8.1
Andy Wigley
10:5
0
Making the most from Windows Phone App
Studio
Tom Verhoeff
36. Related sessions 17-4 (2)
Slot Title Speaker
09:1
5
Jouw apps op alle schermen en resoluties Martin Tirion
14:5
0
Bouwen en distribueren van je Enterprise apps
voor Phone
Matthijs
Hoekstra
16:2
0
Networking, Mobile Services and Authentication
on Windows Phone 8.1
Andy Wigley
Editor's Notes
Code, code en meer code
RUSTIG PRATEN!!!
Claim to fame
Make me rich
NIET op de agenda
Map controls op Windows Phone: 1. Microsoft.Phone.Controls.Maps.Map Yeolde Bing Map control2. Microsoft.Phone.Maps.Controls.Map (here maps, alleen ‘Silverlight’)3. Windows.UI.Xaml.Maps.MapControl
Hierlatenzien:Demo Windows Phone 8.1 app:Punten, lijnen, vlakken (laatste twee toggle)EropklikkenNadruk op MapIconleggenveelpuntentekenenLabelingSmart displayDan demo Windows 8 appWP 8.1 Code:Toon XAMLMapControlAppBar (primary/secondary commands)Geopoint – BasicGeopositionIconAnchorpointZ-index!LineGeoPathShape hetzelfdeMapTapped vs Tapped!Hoe vind je de shape(s) die zijnaangekliktEn de alfanumerieke data – Attached Dependecy Property (ouwetruuk) – zit in een PCL!Even langsPointListlopendit is in de shared project!Windows 8 codeToon XAMLLocation ipvGeopointLayers met eigen z-coordinaatPuntobjecten – XAML elementen (geenMapIcon) Styling via XAML!!Events op de shapes ZELFGeen stroke color voorPolygonenMerk op: Asset (duswp logo op kaart) in shared project!In Win81 library – extensionsmethods conversie Location->GeopointHeel kleinbeetjeorganisatie:PCLShared codePlatform specific codeFrame rate counter uitNiethandig al die libraries als source te koppelen IRL – welvoor demoFRAME RATE COUNTER
Route van die mijnvrouwnaarhaarwerkvolgtHierlatenzien:Demo Windows Phone 8.1 app:Show routeShow fencesOpen location.xmlStart en start trackingBenadrukken – routing in emulator. Paarpunteninvoeren – gaanWatookopvalt is datgeofencingnietzogoedvoorditsoort heel erg real time dingengeschikt is maar daar is het ooknietvoorbedoeld.VervangDrawCarIcon -> DrawCarImage in GeolocatorPositionChanged. Je kunt nog steeds XAML elementen op kaarttekenenen, nu ook in Children. Nadeel performance, voordeel: altijdbovenop. Dan demo Windows 8 appSimulatorAlleeneenpaarcoordinatenintikkenuit Windows8Coords.txtRouting – minder punten en een andere route(?)Code Windows Phone 8.1 appToon XAMLFindRoute – MapLocationFinder.FindLocationsAsync & MapRouteFinder.GetDrivingRouteAsyncRoute -> Legs -> ManeuversDrawManeuver tekens iconen & retains maneuversIn Maneuverdescription. Simpele data class – locatie, omschrijving, coordinaat ->shared projectDrawGeofences -> GetFenceGeometries is an extension method -> ToCirclePoints -> GetCirclePoints (bloggedhier over, flinkaangepast door Jarno)Note – inmiddels diep in PCL. Geofencing objecten beschikbaar binnen PCL.GeolocatorPositionChangedaangeroepen – bijeen geo position changeWeer een conversie – derde coördinaat typeEr mist nogal wat – dat zit in het shared stuk!shared part – partial class for main page. Daar zit in:Afvangen van klikken op Routing buttonStarten en stoppen geo trackingGeolocator!Hele afhandeling geofencingAanmakenGeofence trackingToggleGeoFences -> AddGeofences, DrawGeofences tekent fences, geeft ze id van de maneuver (zodat ze laker bij elkaar gezocht kunnen worden)Alleen echt tekenen niet – Gebruik F12 context switcher om te laten zien hoe welGeofenceStateChanged -> uitleggendoetiets met ManeuverDisplayerZoom out ;-) shared signature past en map controls hebben dezelfde naamManeuverDisplayerUsercontrol, in geheel in shared projectSimpel ding, met eigen ObservableCollection van ManeuverDescriptionMethod toevoegen/verwijderenToont/verbergt zichzelf als er iets dan wel niets te zien is.XAML: simplestyled list, boundtomaneuvers list, toont descriptionEn dat control werkt ongewijzigd op Windows 8Windows 8 code:Toon XAML, Show Pushpin stylingStress ManeuverDisplayer is ongebruikt gewijzigdKan zelf direct een route laten zien, maar ik wilde een 1:1 display, dus teken hem helemaal zelfGeocoding en routing nogal anders
From shared code you can call into non-shared code, as long as the signatures match.You can even can call into PCLs
Bennen der nog Friesen in de seel?Hierlatenzien:Demo Windows Phone 8.1 app:Schaatsbanen, TAPPEN. Opmerkingmaken over ‘nuttige info’Visstekken. INZOOMEN, smart labeling en labels latenzienInfo window sluiten. Tonen animatie. Uitleggen – allemaal shared code, inclusief het storyboard Vaarroutes. Thematischekaart, tappenNatuur – zit in menu. Tja, er is maar ruimtevoor 4 buttons…Kanlangduren. Is veel data. BestandenlatenzienDemo Windows 8 app, zelfdeverhaal.Windows Phone 8.1 codeBeginnenbij XAMLMainPage.xaml.cs zit nietzoveel in – LoadData, objectenbinnen viewport… maar er is een share MainPage.cs. zit ooknietzoveel in, vooraldoorlussennaarFeatureDisplayer en ‘theme loaders’Feature DisplayerHebben we al gezien, maar nu compleet met visualstates, animaties, templates en de hele rimramFeatures properties zitten in een Dictionary, dus converter (binden werkt niet anders)Theme loadersThemeLoader.cs (shared)SkatingLoader (shared code)Initial locationLaden features met WfsGmlClient – feature type en output format. Straksuitleggen hoe datwerkt.OrdinateorderookeenleukeWat is Feature -> Latenzien. Merk op – in PCL. Net alstrouwensgeheleSkating Loader (Windows Phone)Skating Loader (Windows 8)Little code. Geen clutterBoatingloader: geheel in shared. ifdef. VoorkleinedingenhandigerThematischekaart!Ordinateorderweer…Context switcherFishingLoaderNatureLoader – weinigvlak WFS, vaak heel duur in termen van data
Meer dan 100 type features – dusalleenvoor Friesland alleenmeerdan 100 apps. Ook in browserlatenzien (ijsbanen)Feature type naamCoordinaat system – 4326 is altijdgoed. Maar nietaltijdaanwezig. Dan maar proberenCoördinaat HIER altijd in Lon,Lat. Dat is makkelijk te zien.GML FILES
Volgorde van ordinaten en waarin je de vraag moet stellen en ze terugkrijgt verschilt.Friesland is Latlon, anderen vaak LonLat.Mogelijk is dit een aanduiding die aangeeft wat de bedoeling isEn anders proberen. Voer als initiële waarden de WGS84BoundingBox waardenKrijg je een fout of niks, doe je het foutKrijg je heel heel veel data en/of crasht je telefoon door out of memory, heb je een iig de ordinaat volgorde goedBent u ook zo dol op standaarden?
CODE! Helemaal in PCLWFSGMLClientUTF8 conversieWfsGmlGeometryParserAleen primitieve geometrieën – maar ja donuts worden toch nog niet ondersteund.Library uitbreiden zodat hij meer spullen ondersteunt, straks publicatie.
Net als met Javascript, HTML en CSS – af en toe wil je ervan janken, maar het is nu eenmaal de standaard
Ifdef – meer clutter, meeroverzicht
Ikdenkdat hetfeitdatelke app 3 punt types heeft wel het minst geslaagde deel is (plus Geopoint/BasicGeoposition). Ik begrijp technicaldebt maar al te goed, er zat natuurlijk al iets in Windows, en soms moet je een stukje achteruit steken voor je weer vooruit kunt.