Odoo View Model and Arch Parser | Custom Map View Type

Odoo View Model and Arch Parser | Custom Map View Type

Key Points:
- Use the latest ODOO 17 community version
- Use LEAFLET Map API Library
- Explain the process STEP BY STEP
- Create Leaflet Map MARKERS and POPUPS dynamically
- OPEN CONTACT details from the popup

In this tutorial, the following will be done:
03:24 - Create a layout for the map and contact names
04:42 - Create the view model and retrieve data from the database
11:33 - Create dynamic markers and popups
16:02 - Create the view arch parser
24: 04 - Render markers and popups based on the view record architecture.

[Mhandes-je]

Thanks a lot for your nice explanation,
We want the next video about registries please.

[muhanadtur]

Thanks a lot for the great content as always!
I fixed the scroll issue and tweaked the height values to make it fit in the frame without causing any inconveniences:
<div class="row vh-100">
<div class="col-lg-2 ps-4 pe-0" style="height: 88vh">
<div>
<h1 class="mt-3">Contacts</h1>
</div>
<div class="h-100 overflow-hidden overflow-y-auto">
<ul style="display: table;">
<t t-as="record" t-key="record.id">
<li>
<h3 t-out="record.display_name" t-on-click="() => this.setMapView(record)" style="cursor: pointer" />
</li>
</t>
</ul>
</div>
</div>
<div class="col-lg-10 ps-0">
<div t-ref="map" style="height: 90vh;"/>
</div>
</div>

still though this is just a workaround concerning the height thing, which is annoying!
the "this.setMapView(record)" definition is:
setMapView(record) {
if && {
this.map.setView([record[this.archInfo.latitude], record[this.archInfo.longitude]], 17)
}
}

this makes the list items in the side panel zoom in onto the location of the marker associated with the record using the latitude and longitude.

Thanks again dude! i really find ur videos very informative!

[KlestLazaj]

Hello may I ask if there are many differences in javascript development from odoo16 to odoo17? Especially in POS. I learned a lot from your odoo16 POS tutorials and it would be great if you could show us if there are big differences to it in v17.

[AliHameed-szyz]

Perfect explanation, I need video in registries can u did it please ?

[HOA-NGUYEN-DEV]

Great tutorial, thanks a lot.Waiting new tutorial.

[Erp-jvcy]

can u make the next video about registries please?

[trungvo]

thank you so much. can you make a video tutorial on how to create a theme for the backend? thanks for your tutorials

[AliSaeed-cj]

can u meke the next video about registries please?

[sparkdrago]

Thanks a lot for this content.
I have a question: I purchased a theme (Metronics theme). In its source files all of the components are being initialized by watching for data attributes. All of the code is written in classes which are made using functional style.
I want to use this theme for my owl app. What is the best thing I should do?
- Read the theme code and rewrite all js for my owl components.
- loadJS when My base compoenent is mounted. Since theres no order in bundle file. For this I first have to include the bundle file in my manifest.
- If theres another better option please guide. It will be a great help.
Thankyou!

[wprgtmo]

Thank you very much. Can you make a video tutorial on how to use some scraping library to extract data from a website from client side, i.e. pass data from odoo to another website without API and extract from that website to odoo? Thanks for your tutorials.

[tatiana]

Good day! Thanks a lot for you exellente work. Can you help to explain how to add searchPanel to this View please ?

[redareda-uckg]

Thanks for explanation, i need to roadmap to owl please and very thanks

[hdsmsmart]

Could you please share the eraser diagram ? learn alot from your video, thanks

[furkanshaikh]

Hello Ajscript Media

I posted a comment on your last video where i had face an issue or error like TypeError: Comp1 is undefined.

It is coming from odoo addons I think and i have copied everything that you have showed in video.

But till now i am facing issues and I can't move ahead untill and unless i finish that video.

Could you please tell me are you creating this project in with Enterprise addons or Community add-ons and also if possible then please share odoo's git Commit Id so that i can change the HEAD in my system.

Please Help

[abdulmalekbahamid]

I need to use search bar to filter data, I added the SearchBar to view but It's not work, Thanks bro.

[muhanadtur]

for the sizing issue i did the following:
1 - add some ids to the html elements for easier selection
2 - added this function:
resize() {
let navBar =
let controlPanel =
let sidePanel =
let sidePanelContent =
let h1 = $(sidePanel).find("h1")
let mapDiv =

let height = $(window).height() - $(navBar).height() - $(controlPanel).height() - 25;
$(mapDiv).css("height", height);
let sphHeight = height - $(h1).height()
$(sidePanel).css("height", sphHeight);
$(sidePanelContent).css("height", sphHeight - 25);
}
3- added the following inside the onMounted method:
$(window).on("resize", this.resize);
this.resize()

and it looks better now!

[furkanshaikh]

That error appears when i click on the Map Icon.