Kickstart your web map app!

Video in TIB AV-Portal: Kickstart your web map app!

Formal Metadata

Title
Kickstart your web map app!
Title of Series
Part Number
34
Number of Parts
193
Author
License
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
2016
Language
English

Content Metadata

Subject Area
Abstract
Do you want to avoid writing boilerplate code for map applications? Would you rather take a ready-made template for your apps and start hacking away the cool stuff? Oskari and RPC may be just what you're looking for! Oskari is an extensible and versatile map application platform which provides an easy user-interface for creating embeddable maps to websites. Embedded maps can be controlled from the website with an API to create innovative and user-friendly applications. The API includes features that allow you to 'visualize data' on the map and/or 'react to user interaction' with the map, allow users to give feedback by 'drawing on the map' or create a custom trip planner with routing features. The API can be easily extended by adding features to Oskari platform. Oskari has been originally developed by the National Land Survey of Finland, but now being developed and used by multiple organizations, also internationally. There are numerous websites already making use of embedded maps, including Finnish national e-services.
Loading...
Point (geometry) Mobile app Mechanism design Presentation of a group Mapping Computer animation Bit rate Summierbarkeit Game theory World Wide Web Consortium
POKE Arithmetic mean Computer animation Meeting/Interview Internetworking Point (geometry) Amsterdam Ordnance Datum Bit Game theory
Point (geometry) Explosion Computer animation Point (geometry) output Website Traffic reporting Form (programming)
Standard deviation Functional (mathematics) Server (computing) Mapping Open source Java applet Code File format .NET Framework Front and back ends Web 2.0 Web service Extension (kinesiology) Computing platform Form (programming) World Wide Web Consortium Module (mathematics) Mobile app Standard deviation Mapping File format Server (computing) Software developer Point (geometry) Open source Java applet Cartesian coordinate system Sequence Explosion Computer animation Web service Computing platform Modul <Datentyp> Freeware Internationalization and localization Extension (kinesiology)
User interface Metropolitan area network Supremum Zoom lens Multitier architecture Mapping Mapping Maxima and minima Price index Electronic mailing list Ordinary differential equation Special unitary group Computer animation Computer configuration Query language Website Maize Quantum Summierbarkeit Simulation
Execution unit Mapping Mapping Clique-width Code Ordinary differential equation Cartesian coordinate system Time domain Event horizon Computer animation Telecommunication Web service Personal digital assistant Website Remote procedure call Conditional-access module
Web page Slide rule Functional (mathematics) Mapping Installation art Multiplication sign Zoom lens Maxima and minima Annulus (mathematics) Client (computing) Event horizon Time domain Centralizer and normalizer CNN Telecommunication Meeting/Interview Cuboid Electronic visual display Information security Form (programming) Window Domain name Touchscreen Inheritance (object-oriented programming) Demo (music) Mapping Information File format Web page System call Inclusion map Uniform resource locator Message passing Event horizon Computer animation Function (mathematics) Website Window Electric current Library (computing)
Web page Functional (mathematics) User interface Link (knot theory) INTEGRAL State of matter Length Feedback Connectivity (graph theory) Zoom lens Set (mathematics) Open set Event horizon Web service Mathematics Root Bit rate Computer configuration Cuboid Energy level Information Default (computer science) User interface Area Dependent and independent variables Texture mapping Mapping Information Feedback State of matter Content (media) Instance (computer science) Line (geometry) Cursor (computers) Cartesian coordinate system Word Uniform resource locator Process (computing) Event horizon Computer animation Function (mathematics) Cuboid
Mobile app Slide rule Beta function Presentation of a group Touchscreen Demo (music) Key (cryptography) Multiplication sign Statistics Food energy Theory Geometry Web service Uniform resource locator Computer animation Web service Software framework Website Integrated development environment Software framework Internationalization and localization
Building Server (computing) Texture mapping Mapping Code Content (media) Dimensional analysis Menu (computing) Arm Frame problem Uniform resource locator Speech synthesis Cycle (graph theory) Gamma function Game theory
Mobile app Scripting language Link (knot theory) Faster-than-light Code Interior (topology) Coma Berenices Counting Arm Frame problem Variance Disk read-and-write head Pointer (computer programming) Cross-site scripting MKS system of units Computer animation Multi-agent system Lecture/Conference Function (mathematics) Video game console Summierbarkeit Uniform boundedness principle
Functional (mathematics) Scripting language Logarithm Client (computing) Shape (magazine) Counting Variance Cross-site scripting Average Video game console Message passing Domain name Computer icon Default (computer science) Link (knot theory) Interior (topology) System call Shape (magazine) Frame problem Disk read-and-write head Computer animation Function (mathematics) Cycle (graph theory) Library (computing) Singuläres Integral
Web page Point (geometry) Polygon Functional (mathematics) Mapping Logarithm Polygon Schweizerische Physikalische Gesellschaft Line (geometry) Counting Cartesian coordinate system Measurement Event horizon Variance Implicit function theorem Function (mathematics) Video game console Parametrische Erregung
Polygon Group action Scripting language Link (knot theory) Logarithm Interior (topology) Cursor (computers) Binary file Variance Disk read-and-write head Implicit function theorem Geometry Pointer (computer programming) Cross-site scripting Function (mathematics) Military operation Video game console
Information management Cross-site scripting Scripting language Mapping Demo (music) Memory management Electronic meeting system
Area Polygon Mapping Zoom lens Code Cartesian coordinate system Shape (magazine) Receiver operating characteristic Area Wave Object (grammar) Military operation Uniform resource name Electronic meeting system Vector space 5 (number) Addressing mode Message passing Newton's law of universal gravitation
Computer animation Correlation and dependence
right apologies of ready to start of from is late out so this is the 1st session of this afternoon and I'm very pleased to welcome summary mechanism from analysts from going to talk about own
kick-starting a wet mop up with a scary thank you and welcome all to this presentation so my name is summer McKinnon from analysts Finland and let's get going and let's start by looking at the sum rate of this year and it's spoken and and for those who don't know about is itself a location-based games with points of interest in the real world and you interact with the game when you're on or near the point of the interests of its wildly popular people of
there's a lots of means in the Internet calling people when people are paying it inappropriate to looks kind of like that but in real world
it might look like this which
looks a bit scary so
fortunately they have this report form on the web sites where you can report a dangerous point of interest or request a new 1 but as you can see they have this manual input for 2 coordinates which is not very user friendly I saw this and went like he so let's take a look
what discovery can and do for that kind of a form so Oscar is a free open-source platform for web map services its dual licensed and it has a Java server at the back end which you integrates map services using OGC standards and it's a pretty easy to at extensions to it and for supporting proprietary formats are adding new functionality the from the nets created by JavaScript and when you create an application with tells you because function of this that you need for the application and functionalities are provided by modules so you just pick the code that you want them to start to mean a sequence and you have your application with the function of the that you need and the development is coordinated by national answering of Finland and 1 of the features of was
great is publishing a map so what you have your Chiu portal uh with the map layers and everything
you have this nice user interface where you can select the uh map layers that you want to use on another web sites and some options for tools that you want to include on that map and when you're ready you have some graphic options dark and light teams and stuff like that when you're
ready you press save you get this HTML fragments that you can include on your website and you have a map
so after that you can't start building an application on your website to control the map you can it's a programmatically and make
searches reactivate events like the map moved or a marker or feature being clicked on the map itself being clicked and you can add features or markers to the map and allowed user to draw on the map and what you need for this is this scary RPC client library itself then JavaScript so you can use it with the reactor or annular or whatever the flavor of the monkeys and internally it uses the window post messages to communicate between them map and the parent page and there's some security and stuff like that when you publish the map you select the domain where you want to use it and it's serves restricted to that domain so yeah basically you isn't that HTML fragment on your website include the client library and it has this function called connect and I were achieved reference to the map that you want to talk to from your website and when everything is set up you will get a callback with the non ready as a function of time so I have a demo for this but I'm too afraid to switch the display so so let's just go through the slides so yeah and there's a bunch of things that you can to it the location already color the being clicked and more work you can also requests the map to be moved to another location as for the user's location and there's some functions that you can use that to get the location information like the map center or the bounding box zoom ranges that are available and as soon thank functions OK so Eddie markers that actually should I explain that request how many you off you know what an is when broken you a bunch of request is a similar concept in was carried where where instead of you getting and the event that something has happened to you request that something you want something done so an abstract that function call maybe yeah so it's possible to add markers remove them 1 by 1 or all of them high hide and I should have put mop up on screen again so
yes that's what women need for the Niantic forms for the Pokémon go to just include the map on the page and to show the user map where they can click the location and you have the coordinates in a predefined format that you can just Central Europe I can't with that form what the
OK so when you published in that you select layers that you want to use on that uh application you and have some of them hidden from the user so the responsibility to show them with the DAPI Jane still perceived give them and ask which layers are available on to map you get an idea and then name and if there is some restriction for the zoom levels that the players are visible in stuff like that basic information and you can hide them show them requests the that feature information from the layers OK some user interface related stuff so infoboxes and goalscorer component which is basically a pop up on on the map that follows to map locations so you can from Europe you can feed pop up on the map with the content that you like and it can also have links and buttons and you will get events will if the user clicks those on the map son and you can show a Procrustes been if something you want to signal that something is loading currently there some other the function is also for changing the cursor style and getting a screenshot and stuff like that OK so you can also allow the user to draw something on the map and you will get this drawing events 1 whenever the user is like moving the mouse cursor and even the includes stuff like the length of the line that they're drawing or the area size that if they're trying a public and so you can use it for measurement tools as well or you can just give it existing cheery annotation or not text to start modifying some geometric and features what comes out of the draw tools so you can add them with a couple of new requests you can include styling for the features and and whenever you add a feature you can set up the maps automatically zoom to it stuff like that you can remove the feature set and or there's another rate request if you add a bunch of features you can assume in to include all of those in the map MAP bounding box so another event whenever a feature is added or removed or clicked you will get an event notifying about the feature being cooperated on and there's a function for getting all the features that have been added to the map and more you can actually make a lot of stuff changes on the map and request state for it I so you could provide a save button for the user if they want to uh say that particular location and later stated that they have on the page on the map and to blow that same state or a set of today in states that the the map was published in and there's a bunch of integration options you can do searches on the map OpenStreetMap searches included automatically but you can pretty easily at whatever uh search functionality is that you want to do its job could really easy to use and there's also this about 3 words integration built-in open Trip Planner is used for getting roots with no busses and stuff like that so there's an integration for that uh it's not included in know scary but if you have some instance that's providing that as a service you can use it configure it to us going and it basically creates that yeah Jason that's more easy to use with that was car functionalities and also an open 3 1 1 and integration for feedback related functionalities that's that's still under works so might change of but yeah it's easily extensible so you can great your new functionalities and it's actually pretty easy do uh at the user interface for the publishing feature for new functionalities we say
yes that's a lot of functionality so minds of
users for Oscar there's the European Location Framework showcase that's using in the Arctic SDI chip oral and Finnish nationals the government services city of timbre in Finland an and Icelanders launching energy bottle latest later this year I'm fairly excited to see what's what's that can look like
through this is my last slide I was reserving time for the demo but let's see if I can get it and get the screen changed but anyway here's our Kidder and user treated and the sites and this presentation and all the examples are in this key to the proposed theory and there's also a bunch of other examples in the website for us it seems like that just show you could have been no nothing nothing happens the something happens know
there's a map of of let's try reloading OK so and this is
1 example having markers so whenever
I have this small no chance some server and I just used to service static content it has an HTML with the high frame on it and some javascript code that to command that maps so 1 of the things it does when I click the map adapts the market at that location and i'd cycles through the building shapes for that are included in and when and when I click this market its chances the customer speech so you can also use SPG or a URL for a PNG to display on a as a marker so let's go here
here's the actual code for it html pretty simple it only has this does this show that the back of the room should increased from been yeah so you have your frame here the
client library here this and the need for that just the cost to connect function and here's the actual of markers demo so they need is pretty simple you
just pass the reference for the I frame and and to give it does that the domain that should be shown on the frames so in whenever an averaging is set up you will get this call at 1 ready and a callback so what I do here is just call another function called start at and passes the reference for the channel the OK so here I'm listening to them not being clicked uh counting the plate cliques so if we haven't cycle toward the predefined shapes that we have for markers I'm adding a new 1 here's helper functionality to show that you would define the coordinate that you want to send you can have an optional methods included uh you can define the shape it shows the default if you don't and you can pass the PNG or SVG here you can also change the size of the market give it some ideas so you know when you click on the market you know which 1 was it was you will so pretty simple what you OK
so whenever there's so after 6 or 7 clicks whenever a marker is being clicked and I print out today that if it was just marker with an idea markers 6 I modified by sending it the just referencing with the ID and giving it the customers SPG to update that marker with the new shape and after 10 clicks just remove it still 0 2
minutes cool again I should do I can show you briefly about the drawing feature this also have this where you can add features to the page but whenever this application is started he'd automatically starts that allows the user to draw on the map you can specify the feature by giving it some ideas so if you have multiple features like the measurement or the or some other drawing functionality you can separate them be and by checking this idea that you will get on the drawing event you can drop all polygons lines points whatever there's some optional parametres as well like showing that measurement on the map what the
user is drawing all the yeah
let's say that the action the this what
now OK so that perhaps there is no work and start drawing on the map of this you would have some button to initialize the drawing but this is just for demo so
when I finished I zoom in on the feature I also had to go to that when I click
this I add another feature on the map and zoom so both are visible the and you can probably see this Council he over these are the and so you get the geolocation and the area for the for that drawing and the idea for the drawing application stuff like that the click to feature there's the idea for the future and and I think you the
Loading...
Feedback
hidden