SVG Map - Tile Map Without Javascript
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 95 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/15577 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Place | Nottingham |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
FOSS4G Nottingham 201376 / 95
17
25
29
31
32
34
48
50
56
58
68
69
70
82
89
91
00:00
Programmer (hardware)Ring (mathematics)Google MapsOpen setElectric currentWorld Wide Web ConsortiumGoogle ChromeInternet ExplorerBefehlsprozessorArchitecturePlastikkarteBing MapsMobile WebGoogolMaxima and minimaSemiconductor memoryLeakMappingComputer fileCausalityCharge carrierImplementationMetropolitan area network3 (number)Cartesian coordinate systemImplementationTexture mappingTesselationComputer iconComputer fileSoftware developeroutputJust-in-Time-CompilerOcean currentMobile WebOpen setWeb 2.0Set (mathematics)Raster graphicsMultiplication signLatent heatPresentation of a groupCausalityComputer programmingMappingTessellationGoogolSemiconductor memoryCharge carrierModul <Datentyp>Open sourceForm (programming)Scripting languageInternetworkingBefehlsprozessorMagnetic-core memoryHand fanProgrammer (hardware)AreaCurvatureSpeciesView (database)Real numberCellular automatonBeat (acoustics)WhiteboardNeuroinformatikRight angleMusical ensembleStructural loadMomentumExtreme programmingShape (magazine)Point (geometry)QuicksortState of matterComputer animation
07:55
System programmingModule (mathematics)TesselationRing (mathematics)Computer programPhysical systemCoordinate systemMereologyRevision controlFrame problemGraph (mathematics)Price indexMaxima and minimaFunction (mathematics)RootFuzzy logicSineComputer-generated imageryExtension (kinesiology)Query languageData storage deviceZoom lensView (database)CuboidLevel (video gaming)HypermediaMappingClique-widthFluxMultiplication signWeb browserImplementationContent (media)Computer reservations systemMassAttribute grammarSpeciesParameter (computer programming)Data conversionSinguläres IntegralDefault (computer science)Virtual realityWeightSoftware engineeringVector spaceThumbnailCodeSubject indexingRevision controlPoint (geometry)HypermediaPosition operatorMultiplication signCASE <Informatik>AuthorizationPhysical lawStandard deviationDegree (graph theory)Functional (mathematics)Moment (mathematics)Beat (acoustics)Bridging (networking)Musical ensembleOnline helpTrailPhysical systemMedical imagingState of matterSoftware testingEndliche ModelltheorieView (database)Scheduling (computing)Error messageHyperlinkParameter (computer programming)Matrix (mathematics)Sampling (statistics)Coordinate systemGame controllerLevel (video gaming)Query languageAttribute grammarZoom lensTesselationTessellationModule (mathematics)RootWeb browserTransformation (genetics)Computer fileCuboidImplementationMereologyGradientStructural loadResultantScripting languageCache (computing)Computer animation
15:50
WeightFuzzy logicContent (media)Computer reservations systemBinary fileCoordinate systemPhysical systemFunction (mathematics)Dimensional analysisRing (mathematics)CalculationComputer-generated imageryVirtual realityMaxima and minimaLinear multistep methodPoint (geometry)Computer animation
16:11
Zoom lensGroup actionMappingMetropolitan area networkVideoconferencingMoving averageComputer-generated imageryContent-addressable memoryMultivariate NormalverteilungMaxima and minimaLarge eddy simulationMUDWorld Wide Web ConsortiumComputer iconStorage area networkExecution unitMagneto-optical driveHand fanPointer (computer programming)Mach's principleArchaeological field surveyGodWeb pageDrag (physics)Web browserGUI widgetFrame problemFunction (mathematics)Physical systemRing (mathematics)Internet ExplorerPlug-in (computing)Windows VistaRevision controlInformationSoftware developerPatch (Unix)InternetworkingCodeSummierbarkeitImplementationNetwork topologyExtension (kinesiology)3 (number)Artificial neural networkGamma functionTask (computing)Wide area networkLevel (video gaming)Content (media)Data typeScripting languageBuffer overflowDivision (mathematics)Position operatorAbsolute valueClique-widthComputer fontGreatest elementRight angleMathematical singularityHill differential equationSineAverageWeightSpecial unitary groupPolygon meshInterior (topology)Bookmark (World Wide Web)Point (geometry)Physical systemBeat (acoustics)Multiplication signMachine visionBuildingBitCommitment schemeGame theoryQuicksortBasis <Mathematik>Address spaceState of matterObservational studyFamilyEndliche ModelltheorieQueue (abstract data type)Cellular automatonMobile appSoftware developerPatch (Unix)Texture mappingWeb pageCoordinate systemWindowRevision controlWeb browserImplementationInternetworkingStructural loadCodePlanningZoom lensLatent heatGame controllerAlgorithmDirection (geometry)SoftwareMassFunctional (mathematics)InformationModule (mathematics)Computer animation
21:04
ImplementationRing (mathematics)Presentation of a groupInformationSoftware developerMappingLink (knot theory)Revision controlCodeBinary fileAverageVirtual realityWeightComputer-generated imageryComputer reservations systemIntrusion detection systemCoordinate systemPrice indexSicTesselationFunctional (mathematics)Vector spaceTexture mappingLine (geometry)Different (Kate Ryan album)Direction (geometry)MereologyImplementationWeb browserMathematicsRootResultantWritingTouch typingProcess (computing)System callMobile WebPoint (geometry)Musical ensembleGame theoryMultiplication signKey (cryptography)Right angleRoutingElectronic program guideChaos (cosmogony)Revision controlBitComputer animation
Transcript: English(auto-generated)
00:01
Okay. I start my presentation. Yeah. My presentation title is SBG Map, Tile Map without JavaScript. Yeah. Let's start my presentation. Yeah. So this topic is here. Okay. I'll continue introducing myself.
00:24
So I'm a programmer at GeoRepublic Japan. I like electronic music such as the FX3 or scale for sure in the UK artists. Yeah. Also, I'm Otaku is being
00:42
his anime fan and my icon is, this icon is here. Yeah. I use anime icon here. So I joined in some community in Japan. I'm a member of my modular community in Japan.
01:02
So my T-shirts is Firefox T-shirts. I wrote some books in Japan about Firefox. Also, I'm a member of Japan Unique Society. Also, I'm an open-source map mapper.
01:22
Yeah. GeoRepublic is some project. The famous is PG routing project. Now, open-source GeoFuse and the commercial-based geosomatic product is. We support Postgres and open-source map and others.
01:44
Yeah. So I enjoy mapping back too much. I go to set up map and to this Hackfest and the Postgres. So I stay in UK three weeks.
02:02
Yeah. So before I noticed one notice, this presentation describe some proposal to W3C. So be careful, they are not standard. Yeah. So next topic is about current tilemap.
02:27
Current tilemap on the web implemented using JavaScript such as Google Maps, and OpenLayers, and so many tilemap using JavaScript.
02:47
But JavaScript has some implementation with JavaScript has some programs. So it's in three topics.
03:01
Yeah. So JavaScript engine is, so sometimes JavaScript program must need to fight with small different between each engine. Firefox now is only monkey. So and the Firefox is better support a comma script and new aspect,
03:25
and Google Chrome and Blink use V8 engine, and WebKit who are Safari use JavaScript core and Internet Explorer use Chakra.
03:43
So goodbye Opera. Opera has gone. Yeah. So mobile devices don't have popular CPU. Sorry, I lied.
04:03
New icon is of a 64-bit devices. But too many device don't have a powerful CPU. I have these devices.
04:21
Yeah. This is Firefox OS form. Yeah. It's a low spec devices. Yeah. Other programs, iOS don't support JIT in application. When application using UI WebView,
04:45
so this can enable JIT in application. So Apple support only mobile Safari. Yeah. So loading big JS file.
05:06
So Google Maps HTML file is over 200 kilobyte HTML files and open layers. So it's a mean JS is compressed JavaScript.
05:24
It's over 300 kilobyte. Yeah. But so if use mobile JS it's small, but full set is maybe over as a big JavaScript file.
05:43
But if it is small. Yeah. So it is nothing compared to rolling map data. Yeah. So maybe many raster data. But sometimes loading big JavaScript file cause memory leaks.
06:06
Yeah. So it's a big problem. Yeah. So I think, so tile map with JavaScript can cause some troubles, but time fails or won't.
06:23
However, we can try another approach. So this is SVG map. So SVG map is a technology implementation for tile map using SVG. So a lot of specification has been developed by Satoru Takagi.
06:51
So he worked in KDDI, he's a famous carrier. So I have my iPhone, he's used this carrier's network.
07:04
And so SVG map has a long history. So basic technology of tile map goes back to 1996. So developer KDDI,
07:20
but some Japanese company try around this year, so to try implementation of tile map. And they focus on research and development of what's named.
07:44
Maybe I draw JAM maps. Yeah. And already before SVG technology come up. So he said that. So SVG branch, maybe I forget to say this.
08:02
Yeah. But yeah. Two. Sorry. This is all right. And they started
08:21
standardization activity at W3C, SVG working group in 2000. So SVG 1.1 include some result of their activity.
08:41
Graphic coordinate system is, so this spec is the best KDDI activity. So they tried to develop for SVG Tiny 1.2.
09:06
So they developed the tiling and tiling module for SVG 1.2 Tiny specification, and submit it was as W3C member submission.
09:21
That means it's not standard. Yeah. But this module uses animation tag, but it's not useful because animation is only animation, not tile. Yeah. So they now work on some new proposals.
09:47
So the tiling and rearing module was separated from one into two proposal, and it now uses iFrame tag instead of animation tag.
10:04
Yeah. So one spec is iFrame-like syntax, and the other spec is global coordinate system. Sorry. The basic concept is in large part
10:24
is similar to the SVG 1.2 Tiny gradients. So iFrame syntax supports tiling function and rearing function.
10:40
Tiling is root SVG document contains tiled SVG document with iFrame, and each tile document also contains tiles, SVG documents again, and so it's a cascading document.
11:09
Rearing is the container layers of each SVG document, displayed depending on view box and zoom level.
11:23
So zooming function uses extended CSS3 media query defined in this proposal. So it's a sample. Yeah. So this is media query.
11:44
Yeah. So this example we display is a layer-wise SVG or layer-2 SVG depending on zoom level. Yeah. When zoom down,
12:02
show this, and zoom up, it show this. When no media attribute is declared, the layer will be always shown. Yeah. So as a sample, yeah.
12:21
Sorry. It's shown that this sample and this sample here. L1 SVG contains four iFrame tiles and ordered it.
12:41
The layer-2 SVG looks like L1 SVG, but in the cascading document, it's used as always. Layer-2 contains a whole time, whole 60 SVG document.
13:03
Yeah. So layer-1 is this and layer-2 is like this, and the SVG switch with a CSS3 media query,
13:24
and it supports dynamic loading. The browser decided which documents to load with CSS3 media query and the view box. Sorry. I mistake not view box. View box. Yeah. A loaded document will be cached in the browser.
13:50
So that file is cached in browser cache. Yeah. The global coordinate system,
14:03
so SVG provides supports for geographic coordinates. However, we need to simply implementation using specific geographic coordinate system. So it's a control.
14:21
Yeah. So global coordinate system provides a function to share coordinate system by the grand common coordinate system between errors and documents. Sorry. Okay. I speed up.
14:41
Yeah. So HREF attribute spec fix global coordinate system for SVG document. It's in detail here. Transform attribute spec fix composite parameter.
15:05
Yeah. So the transform is the matrix. I use this matrix. Yeah. So let's look at a sample.
15:20
So in this case, its values is this value, its matrix is there and sorry, calculate it. Sorry, it's a Ruby script. So we get this coordinate and so this point.
15:49
So this file show this point.
16:05
Yeah. It's near the Lake Kizaki in Japan. This point is here and this point and scroll it.
16:23
Maybe same point. Yeah. No browser because such as a drug scoring and zooming is mass for you is defined it in this specification.
16:45
So rather may provide there. Yeah. So which we have the control may be provided by browser, but other to be here appear on web page.
17:08
So summary is a time up for this function provided to be and the coordinate system is provided by global coordinate system and the brother be her is not defined.
17:21
The implementation. So some implementation is available. So Internet Explorer SVG plugin. Yeah. It's called SVG map toolkit. So it's a big problem because supports
17:44
only Windows Vista and XP and yeah. So I can try this because I have only Windows 7. So you can download from SVG map app.
18:05
AJAX version is animation tag version. Yeah. It's a very tiny module. So basic functions are implemented by using JavaScript.
18:24
It support many modern browser. It's not a modern. Yeah. So you can access SVG map develop information. Yeah. Chromium version is also developed.
18:41
So it support our current proposal on the global coordinate system. But I don't know where the patch on Internet. Yeah. So Firefox add-on version. So this version is our company developed and so it's based on AJAX implementation.
19:03
So code is in here. Native version is also start implemented but currently doesn't work. Yeah. So in native version status,
19:22
I can load algorithms in SVG but no function. Yeah. So I tried them. So it's AJAX version.
19:40
Yeah. So you can try this many browser. So it's not support master map. It use this SVG.
20:04
Yeah. So there are no tag. Yeah. Next version is also. This version is loading SVG directly. It's add-on version.
20:22
Yeah. It support mouse zooming with mouse scroll. So now loading is another layer.
21:01
So I think the network is so. Yeah. Okay. So we have a plan. So I will continue the native implementation for Firefox. I will submit in each in bugzilla. Yeah. Okay. If you have some interest in this,
21:32
so please contact me. Yeah. Thank you.
21:50
Hi. Yeah. No, because SVG has support SVG.
22:02
So I don't need to try to execute the data because but yeah. Yeah. So SVG is support vector data.
22:31
Yeah. Maybe I think it's not
22:41
a problem because instead of this image, change some rect as a line or so. I think it's not a problem. It's a basic function in SVG. Yeah. Okay.
23:09
Oh, how about the direction from one part to another SVG.
23:28
This question is about rooting in SVG. Rooting. Rooting. Find something. Oh, it's a, so now I think it's another topic.
23:43
So our product, our PG rooting and just get the result and write SVG line is a beta. Yeah. So as far as I know, it's not supported.
24:04
Yeah. Only time up. Yeah. Okay. You talked about different implementations
24:22
of JavaScript in different browsers and difficulties, but the same thing will appear with different implementations of SVG engines in different browsers. Yeah. So some different behavior. Yeah. So. You move the problem from JavaScript to the SVG.
24:43
Yeah. So after this, so we can try to only write JavaScript without behavior. So tile map engines behavior.
25:01
We don't think, sorry. Thanks. It was a very interesting approach for me because I was very close to SVG and like an SVG eventually is for many, quite many. Yeah. It's still an important technology
25:20
because it's nowadays been implemented in nearly every browser. Yeah. Okay. Yeah. So I think it's worse to be touch with this standard and move it forward. Thanks again. Yeah. Thank you very much.