Maîtriser la carte dans l’interface utilisateur Telerik pour ASP.NET AJAX

Découvrez comment utiliser le composant Telerik UI pour ASP.NET AJAX Map pour créer une carte étiquetée.

Progress Telerik est un brillant exemple de qualité. Ils fabriquent constamment des composants de haute qualité qui améliorent l’apparence de nos applications Web et les rendent plus intelligentes. Progrès Telerik Interface utilisateur pour ASP.NET AJAX se démarque parmi les bibliothèques de composants, nous offrant les meilleurs outils pour créer des expériences Web dynamiques et visuellement époustouflantes.

Ses composants sont sophistiqués et fiables, avec des conceptions bien pensées et des fonctionnalités robustes.

Image de Leonardo.ai

Cet article examinera l’objet Map pour ASP.NET WebForms et analysera comment ajouter des étiquettes à la carte à l’aide de données personnalisées. Nous utiliserons Interface utilisateur Kendo pour jQuery dans cet échantillon.

Faisons-le!

L’image de la carte ci-dessous est l’exemple que nous allons montrer comment créer.

Exemple d’image RadMap

Il faut configurer l’environnement Telerik essentiel en ajoutant le RadScriptManager, le composant RadMap et la source de données.

1. Créez un nouveau fichier WebForm.aspx. Ajoutez le RadScriptManager et d’autres à l’intérieur de l’élément de formulaire.

1.	<telerik:RadScriptManager LoadScriptsBeforeUI="true" ScriptMode="Release" EnableScriptCombine="false" ID="RadScriptManager1" runat="server" EnablePageMethods="true" EnableViewState="true" EnablePartialRendering="True" EnableScriptGlobalization="true" EnableTheming="True">
2.	     <Scripts>
3.	         <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
4.	         <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
5.	         <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
6.	     </Scripts>
7.	 </telerik:RadScriptManager>

2. Ajouter le RadMap composant.

1.	<telerik:RadMap Height="1000px" ID="RadMap1" runat="server" Zoom="5" LayersDataSourceID="RadClientDataSource1">
2.	    <CenterSettings Latitude="43.2681" Longitude="-97.7448" />
3.	    <ClientEvents OnShapeCreated="onShapeCreated" OnShapeFeatureCreated="onShapeFeatureCreated"
4.	        OnShapeMouseEnter="onShapeMouseEnter" OnShapeMouseLeave="onShapeMouseLeave" />
5.	    <LayersCollection>
6.	        <telerik:MapLayer Type="Shape" ClientDataSourceID="RadClientDataSource1">
7.	            <StyleSettings>
8.	                <FillSettings Opacity= "0.7" />
9.	            </StyleSettings>
10.	        </telerik:MapLayer>
11.	    </LayersCollection>
12.	</telerik:RadMap>

Nous configurons le ClientEvents nous utiliserons ici et définirons le StyleSetting. Nous ajoutons une opacité de 0,7, donc lorsque nous passons la souris, nous la changeons en 1 pour mettre en évidence la forme, comme l’état du Montana dans l’échantillon d’image RadMap.

3. Ajouter le RadClientDataSource composant.

1.	<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server">
2.	    <DataSource>
3.	        <WebServiceDataSourceSettings ServiceType="GeoJSON">
4.	            <Select Url="states.json" DataType="JSON" />
5.	        </WebServiceDataSourceSettings>
6.	    </DataSource>
7.	</telerik:RadClientDataSource>

Dans ce code, le ServiceType= "GeoJSON" attribut du WebServiceDataSourceSettings La balise spécifie le format de données dans lequel le service Web est censé renvoyer.

Dans ce cas, GeoJSON est un format permettant de coder diverses structures de données géographiques. Il est construit sur JavaScript Object Notation (JSON), ce qui facilite son utilisation dans un environnement Web.

Le Select Url="states.json" L’attribut spécifie l’URL du service Web. Astuce : Si vous spécifiez une URL en dehors de votre projet, configurez CORS.

Le JavaScript pour cette RadMap

Le state.json que je fournis dans cet exemple a la valeur de densité pour chaque État américain, mais nous pouvons créer nos propres données. Pour cet exemple, nous avons créé un const avec des valeurs où le nom de la propriété est la clé :

1.	const dataStates = [['Alabama', 141.972], ['Alaska', 1.896], ['Arizona', 85.57], ['Arkansas', 84.64], ['California', 362.54], ['Colorado', 73.99], ['Connecticut', 1108.65], ['Delaware', 696.45], ['District of Columbia', 15097.5], ['Florida', 530.09], ['Georgia', 254.25], ['Hawaii', 321.15], ['Hawaii', 321.15], ['Idaho', 28.72], ['Illinois', 347.25], ['Indiana', 272.54], ['Iowa', 82.215], ['Kansas', 52.63], ['Kentucky', 165], ['Louisiana', 157.5], ['Maine', 64.56], ['Maryland', 894.44], ['Maryland', 894.44], ['Massachusetts', 1260.30], ['Michigan', 260.85], ['Michigan', 260.85], ['Michigan', 260.85], ['Michigan', 260.85], ['Minnesota', 100.71], ['Mississippi', 95.25], ['Missouri', 130.89], ['Montana', 10.28], ['Nebraska', 35.95], ['Nevada', 37.2], ['New Hampshire', 220.5], ['New Jersey', 1783.5], ['New Mexico', 25.74], ['New York', 618.45], ['North Carolina', 297.29], ['North Dakota', 14.874], ['Ohio', 422.84], ['Oklahoma', 82.83], ['Oregon', 60.495], ['Pennsylvania', 426.45], ['Rhode Island', 1509], ['South Carolina', 233.10], ['South Dakota', 147.105], ['Tennessee', 132.12], ['Texas', 147.10], ['Utah', 51.44], ['Vermont', 1dw01.595], ['Virginia', 306.75], ['Virginia', 306.75], ['Virginia', 306.75], ['Washington', 153.89], ['Washington', 153.89], ['Washington', 153.89], ['West Virginia', 115.59], ['Wisconsin', 157.8], ['Wyoming', 8.7765], ['Puerto Rico', 16]];

Pour votre implémentation, ces données peuvent se trouver dans le fichier state.json ou vous pouvez les créer vous-même et les charger à partir d’un point de terminaison.

Création des étiquettes

Sur l’événement client onShapeCreatednous pouvons créer la bbox sur la forme pour contenir les valeurs que nous souhaitons afficher.

1.	function onShapeCreated(e) {
2.	
3.	var shape = e.shape;
4.	var key = shape.dataItem.properties.name;
5.	var valueArray = dataStates.find(function (item) {
6.	    if (item[0] === key) return item;
7.	});
8.	
9.	var customValue = parseFloat(valueArray[1]);
10.	
11.	if (customValue > 150) {
12.	    shape.options.fill.set("color", "red"); 
13.	} else {
14.	    shape.options.fill.set("color", "blue"); 
15.	}
16.	
17.	var bbox = e.shape.bbox(); 
18.	
19.	if (bbox.width() <= PMinWidthToDisplayLabel) {
20.	    return;
21.	}
22.	
23.	var options = { style: ‘currency’, currency: ‘USD’ };
24.	var labelText = customValue.toLocaleString('en-US', options);
25.	var center = bbox.center(); 
26.	var label = new kendo.drawing.Text(labelText);
27.	label.options.fill.color = "#DEDEDE"; 
28.	var labelCenter = label.bbox().center();
29.	
30.	label.position([ 
31.	    center.x - labelCenter.x,
32.	    center.y - labelCenter.y
33.	]);
34.	
35.	e.layer.surface.draw(label); 
36.	
37.	}

À la ligne 4, nous lisons la valeur de state.json pour la forme actuelle, shape.dataItem.properties.namequi est utilisée comme valeur clé pour le dataStates était.

À la ligne 11, nous utilisons une valeur arbitraire pour modifier les couleurs de la forme. Dans ce cas, je choisis 150.

À la ligne 17, nous créons la boîte d’objet pour contenir l’étiquette.

À la ligne 19, nous affichons le label en utilisant une autre valeur arbitraire. Ceci est utile pour éviter de répéter les valeurs dans les îles de l’Alaska.

Aux lignes 23 et 24, nous transformons les données en valeur monétaire.

Des lignes 26 à 27, nous personnalisons le contenu. A la ligne 30, on centralise la position de l’étiquette. À la ligne 35, nous ajoutons l’étiquette au calque.

Ajout du contenu de l’info-bulle

Nous pouvons ajouter des informations personnalisées sur l’info-bulle lorsque la souris passe dessus.

L’image ci-dessous montre à quoi cela ressemble.

Passez la souris sur le Nevada

Voici l’événement onShapeFeatureCreated pour l’infobulle sur la forme :

1.	function onShapeFeatureCreated(e) {
2.	
3.	    var key = e.properties.name;
4.	    var valueArray = dataStates.find(function (item) {
5.	        if (item[0] === key) return item;
6.	    });
7.	
8.	    var customValue = parseFloat(valueArray[1]);
9.	
10.	    var options = { style: ‘currency’, currency: ‘USD’ };
11.	    var tooltipText = customValue.toLocaleString('en-US', options);
12.	
13.	    e.group.options.tooltip = {
14.	        content: e.properties.name + " - " + tooltipText,
15.	        position: “cursor”,
16.	        offset: 10,
17.	        width: 120
18.	    };
19.	}

A la ligne 3, on récupère la clé. À la ligne 4, nous obtenons la valeur.

Conseil: Si votre JSON a déjà une propriété à afficher, chargez-la depuis e.properties.MyCustomValueInJsonoù MyCustomValueInJson est le nom de votre propriété.

À la ligne 14, nous transmettons le contenu de l’info-bulle.

Conclusion

L’interface utilisateur Telerik pour ASP.NET AJAX optimisée par l’interface utilisateur Kendo pour jQuery nous offre un ensemble de composants solides et fiables pour créer des expériences Web dynamiques et visuellement époustouflantes. Cet article montre comment utiliser l’objet Map pour ajouter des étiquettes à une carte basée sur des données personnalisées. Nous avons appris à configurer l’environnement Telerik, à ajouter le composant RadMap et à nous connecter à une source de données. Nous avons également examiné comment créer des étiquettes et donner à l’info-bulle nos propres informations. Avec ces outils et méthodes, les développeurs peuvent créer des cartes riches et interactives pour nos applications Web.

Téléchargez un Telerik DevCraft procès maintenant. Même pendant l’essai, vous pouvez appeler le support Progress ou me contacter sur LinkedIn pour échanger des idées ; Je parle anglais et portugais.

Les références

N’oubliez pas : Interface utilisateur Telerik pour ASP.NET AJAX est livré avec un essai gratuit de 30 jours. Mieux encore, essayez le Telerik DevCraft bundle gratuitement pour voir quelles autres bibliothèques de composants .NET ou JavaScript ainsi que les outils de reporting, de test et de débogage Progress ont à offrir.

Essayez Telerik DevCraft