درس بناء خريطه جغرافيه SVG

IE9 قد أعلن دعمه للخرائط الجغرافية وهناك طريقه رائعه لخلق خريطه قائمه علي التصورات
وهي POLYMAPS وهذا يكون في جميع المتصفحات التي تعرف SVG.

مزايا استخدام SVG لمثل هذه التصورات هي كثيرة : حجم ملف أصغر، وميزات فائقة التصور، وتجهيز أقل كثافة وأسرع حركة.
وعلاوة على ذلك، فإن هذه الأعمال على أجهزة iPhone و iPads!
هنا سنستخدم Polymaps لرسم المواقع على أساس جدول زمني سوف نتعلم :

1. كيفية الحصول على بيانات الموقع الجغرافي في ملف JSON
2. كيفية جعل خريطة العالم مع خطوط قليلة من التعليمات البرمجية
3. كيفية التفاعل مع SVG باستخدام جافا سكريبت

أولا، ينبغي أن تضع مكتبة Polymaps في ملف HTML قبل أن ندرج النص لدينا.
لذلك دعونا أن تشمل أيضا :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/
 jquery-1.4.4.js"%3E%3C/script%3E'))</script>
 <script src="polymaps.js"></script>
 <script type="text/javascript" src="simulated.js"></script>      

نحن نستخدم العنوان (paulirish.com/2010/the-protocol-relative-url). ونحدد حاويه Polymaps الخاصة به :

var map = po.map()
.container(document.getElementById('map').appendChild(po.svg('svg')))
.center({lat: 51.48, lon: 0});

الآن، يجب تحليل ملف world.json يتضمن كل بلد والمعلومات عن موقعها ككائنات. نضيفها على أنها طبقة على الخريطة :

map.add(po.geoJson()
.url("world.json")
.tile(false)
.zoom(3)
.on("load", manipulatemap);

يمكنك الحصول على اثنين من الأحداث مع طبقة الخريطة : التحميل والعرض.
، سيتم استدعاء الدالة manipulatemap مرة يتم تحميل الخريطة. وأريد أيضا للمستخدمين التكبير والتصغير :

map.add(po.compass()
.pan("none"));

والأن نقوم بتحديد درجات الألوان

var feature = e.features[i];
var  hue = 29;
var  sat = Math.round(Math.random()*99+1);
var  lit = Math.round(Math.random()*60+30);
feature.element.setAttribute("fill", 'hsl(' + hue + ", " + sat + '%, ' + lit + '%)');

عند هذه النقطة ، دعنا نقوم بإنشاء عناصر SVG التي سيتم استخدامها . سنقوم فقط بتعديل المضمون والإحداثيات .

tweetcontainer = po.svg('g'); 
location = po.svg('circle');
if(document.implementation.hasFeature("http://www.w3.org/Graphics/SVG/
 feature/1.2/#TextFlow", "1.2")) {
tweettext = po.svg("textArea");
tweettext.setAttribute("width", 300);
tweettext.setAttribute("height", 200);        
} else {
tweettext = po.svg("text");
}
location.setAttribute('r', 5); // set the radius for the circle
tweetcontainer.setAttribute('class', 'tweet-container');
tweetcontainer.appendChild(tweettext);
tweetcontainer.appendChild(location);     
svg[0].appendChild(tweetcontainer);  

نحن لدينا تحليل البيانات في showtwitter (). نحن بحاجة لترجمة بيانات الموقع الجغرافي في twitter.json
ونحدد إحداثيات بكسل على الخريطة SVG. ويتم ذلك بسهولة عن طريق locationPoint () ، التي قدمتها Polymaps.

var mappos = map.locationPoint({lat: tweet.location.x, lon: tweet.location.y});

الآن، وضعنا الإحداثيات واستخدامنا دائرة الكائن mappos :

location.setAttribute('cx', mappos.x );
location.setAttribute('cy', mappos.y);
tweettext.setAttribute("x", (+mappos.x + 10));
tweettext.setAttribute("y", (+mappos.y + 5)); 

ثم نحن بحاجة لاستبدالها بـ :

tweettext.firstChild && tweettext.removeChild(tweettext.firstChild); // remove 
old tweet if there is one
tweettext.appendChild(document.createTextNode(tweet['tweet'])); //add the 
next tweet  

أخيرا ندعو showtwitter .

if(!!(document.createElementNS && document.createElementNS('http://
 www.w3.org/2000/svg', 'svg').createSVGRect)) {
<svg processing>
} else {
<alternate mechanisms>
}

لمشاهدة استخدمات أكثر لـ SVG اضغط هنــــــــــــــــــــــــــــــــا